写在前面
最近在负责一个微信小程序的前端以及前后端接口的对接的项目，整体上所有页面的布局我都已经搭建完成，里面有一些常用的特效，总结一下，希望对大家和我都能有所帮助
实例1：滚动tab选项卡
先看一下效果图吧，能够点击菜单或滑动页面切换，tab菜单部分可以实现左右滚动
好了，看一下我的源码吧！<喜欢的话拿走不谢哟>
1、wxml
全部 营销系统 家居建材 美妆护肤 数码电器 母婴玩具 零元购活动 
周边团门店微营销系统年费 ¥298.00 ¥298.00
2、wxss <我只展示了tab菜单处的wxss，页面的样式就不在列出>
.tab-h { height: 80rpx; width: 100%; box-sizing: border-box; overflow: hidden; line-height: 80rpx; background: #f7f7f7; font-size: 14px; white-space: nowrap; position: fixed; top: 0; left: 0; z-index: 99;}.tab-item { margin: 0 36rpx; display: inline-block;}.tab-item.active { color: #4675f9; position: relative;}.tab-h .tab-item.active:after { content: ""; display: block; height: 8rpx; width: 115rpx; background: #4675f9; position: absolute; bottom: 0; left: 5rpx; border-radius: 16rpx;}.tab-h .tab-item:nth-child(1).active:after { width: 52rpx;} 3、js
var app = getApp();Page({ data: { winHeight: "",//窗口高度 currentTab: 0, //预设当前项的值 scrollLeft: 0, //tab标题的滚动条位置 expertList: [{ //假数据 img: "", name: "", tag: "", answer: 134, listen: 2234 }] }, // 滚动切换标签样式 switchTab: function (e) { this.setData({ currentTab: e.detail.current }); this.checkCor(); }, // 点击标题切换当前页时改变样式 swichNav: function (e) { var cur = e.target.dataset.current; if (this.data.currentTaB == cur) { return false; } else { this.setData({ currentTab: cur }) } }, //判断当前滚动超过一屏时，设置tab标题滚动条。 checkCor: function () { if (this.data.currentTab > 4) { this.setData({ scrollLeft: 300 }) } else { this.setData({ scrollLeft: 0 }) } }, onLoad: function () { var that = this; // 高度自适应 wx.getSystemInfo({ success: function (res) { var clientHeight = res.windowHeight, clientWidth = res.windowWidth, rpxR = 750 / clientWidth; var calc = clientHeight * rpxR - 180; console.log(calc) that.setData({ winHeight: calc }); } }); }, footerTap: app.footerTap}) 实例2：星级评分
按照惯例先上效果图，默认一星，点击可以选择星级，可半星显示。
1、wxml
评价  : normalSrc}})
+
2、wxss
page{ background: #f5f5f5;}.accessWrapper{ background: #fff; font-size: 14px; padding-bottom: 10px;}.accessWrapper textarea{ width: 94%; margin: 0 auto; max-height: 200px; border-top: 1px solid #f5f5f5; padding: 10px 0px;}.accessWrapper textarea::-webkit-scrollbar{ width: 0px; height: 0px; color: transparent;}.accessWrapper .title{ padding: 10px;}.starsWrapper{ position: absolute; top: -20px; right: 135px;}/* stars */.star-image { position: absolute; top: 50rpx; width: 50rpx; height: 50rpx; src: "../../../image/normal.png";}.item { position: absolute; top: 0rpx; width: 50rpx; height: 50rpx;}.uploadFile{ width: 50px; height: 50px; border: 1px solid #f5f5f5; color: #999; text-align: center; line-height: 50px; font-size: 20px; margin-left: 10px;} 3、js
var app = getApp()Page({ data: { stars: [0, 1, 2, 3, 4], normalSrc: '../../../image/normal.png', selectedSrc: '../../../image/selected.png', halfSrc: '../../../image/half.png', key: 1,//评分 path: ' ', userInput:' ' }, onLoad: function () { }, //点击右边,半颗星 selectLeft: function (e) { var key = e.currentTarget.dataset.key if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) { //只有一颗星的时候,再次点击,变为0颗 key = 0; } console.log("得" + key + "分") this.setData({ key: key }) }, //点击左边,整颗星 selectRight: function (e) { var key = e.currentTarget.dataset.key console.log("得" + key + "分") this.setData({ key: key }) }, upload: function () { var that = this wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function (res) { var tempFilePaths = res.tempFilePaths console.log(tempFilePaths) wx.uploadFile({ url: 'http://example.weixin.qq.com/upload', filePath: tempFilePaths[0], name: 'file', formData: { 'user': 'test' }, success: function (res) { var data = res.data wx.showModal({ title: '上传文件返回状态', content: '成功', success: function (res) { if (res.confirm) { console.log('用户点击确定') } } }) //do something }, fail: function (res) { console.log(res) } }) that.setData({ path: tempFilePaths }) } }) }, textAreaCon:function(e){ var that = this; that.setData({ userInput: e.detail.value, }) }, saveAccess:function(e){ if(this.data.userInput == ' '){ wx.showModal({ title: '提示', content: '对不起，请输入留言内容', }) }else{ console.log(this.data.userInput); // 成功监听用户输入内容 } }}) 实例3：自定义底部弹出层
自定义底部弹出层，在电商的小程序中经常会用到，根据需要自定义弹出内容，先看下我的效果
我已经把我自定义的部分抽离了出来
1、wxml
2、wxss
.commodity_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.2; overflow: hidden; z-index: 1000; color: #fff;}.commodity_attr_box { width: 100%; overflow: hidden; position: fixed; bottom: 0; left: 0; z-index: 2000; background: #fff; padding-top: 20rpx;} 3、js
showModal: function () { // 显示遮罩层 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.translateY(300).step() this.setData({ animationData: animation.export(), showModalStatus: true }) setTimeout(function () { animation.translateY(0).step() this.setData({ animationData: animation.export() }) }.bind(this), 200) }, hideModal: function () { // 隐藏遮罩层 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.translateY(300).step() this.setData({ animationData: animation.export(), }) setTimeout(function () { animation.translateY(0).step() this.setData({ animationData: animation.export(), showModalStatus: false }) }.bind(this), 200) } 写在后面
这次没有文字化的知识点，是我正在做的小程序项目中我做的一些小实例的源码，总结下来了三个非常常用的，
喜欢或者对你有帮助的话欢迎copy和学习，
另外这个项目最近在上持续更新，欢迎star和在博客中留下你的建议。想要什么特效在下面留言博主也会尽力满足各位客官.
最后祝大家国庆节快乐(#^.^#)