1.

微信小程序实现标签页滑块效果

2.

小程序完整代码:

3.

wxml:

viewclass"swiper-tab"viewclass"swiper-tab-list{{currentTab0?'on':''}}"data-current"0"bindtap"swichNav"留言/viewviewclass"swiper-tab-list{{currentTab1?'on':''}}"data-current"1"bindtap"swichNav"活动/viewviewclass"swiper-tab-list{{currentTab2?'on':''}}"data-current"2"bindtap"swichNav"更多/view/viewswipercurrent"{{currentTab}}"class"swiper-box"duration"300"style"height:{{winHeight-31}}px"bindchange"bindChange"swiper-itemviewimagesrc'{{image}}'class'img'/image/view/swiper-itemswiper-itemviewimagesrc'{{image}}'class'img'/image/view/swiper-itemswiper-itemviewimagesrc'{{image}}'class'img'/image/view/swiper-item/swiper复制代码4.

wxss:

Page{background-color:#f1f1f1;}.swiper-tab{background-color:#fff;width:100%;text-align:center;line-height:80rpx;}.swiper-tab-list{font-size:30rpx;display:inline-block;width:33.33%;color:#797979;}.on{color:#ca0c16;border-bottom:5rpxsolid#ca0c16;}.swiper-box{display:block;height:100%;width:100%;overflow:hidden;}.img{width:100%;height:540rpx;}复制代码5.

js:

Page({data:{winWidth:0,winHeight:0,currentTab:0,image:"../../images/404.png",},onLoad:function(options){},onReady:function(){varthatthis;wx.getSystemInfo({success:function(res){that.setData({winWidth:res.windowWidth,winHeight:res.windowHeight});}});},//滑动切换tabbindChange:function(e){varthatthis;that.setData({currentTab:e.detail.current});},//点击tab切换swichNav:function(e){varthatthis;if(this.data.currentTabe.target.dataset.current){returnfalse;}else{that.setData({currentTab:e.target.dataset.current})}},onShow:function(){},onHide:function(){},onUnload:function(){},})复制代码6.

json:

{"navigationBarTitleText":"消息"}复制代码7.

案例二:

8.

效果图:

9.

代码:

10.

wxml:

viewclass"swiper-tab"viewclass"swiper-tab-list{{currentTab0?'on':''}}"data-current"0"bindtap"swichNav"待审批/viewviewclass"swiper-tab-list{{currentTab1?'on':''}}"data-current"1"bindtap"swichNav"已审批/view/viewswipercurrent"{{currentTab}}"class"swiper-box"duration"300"style"height:{{winHeight-31}}px"bindchange"bindChange"swiper-item/swiper-itemswiper-item/swiper-item/swiper复制代码11.

js:

Page({/***页面的初始数据*/data:{winWidth:0,winHeight:0,currentTab:0,},//滑动切换tabbindChange:function(e){varthatthis;that.setData({currentTab:e.detail.current});},//点击tab切换swichNav:function(e){varthatthis;if(this.data.currentTabe.target.dataset.current){returnfalse;}else{that.setData({currentTab:e.target.dataset.current})}},/***生命周期函数--监听页面加载*/onLoad:function(options){},/***生命周期函数--监听页面初次渲染完成*/onReady:function(){varthatthis;wx.getSystemInfo({success:function(res){that.setData({winWidth:res.windowWidth,winHeight:res.windowHeight});}});},/***生命周期函数--监听页面显示*/onShow:function(){},/***生命周期函数--监听页面隐藏*/onHide:function(){},/***生命周期函数--监听页面卸载*/onUnload:function(){},/***页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function(){},/***页面上拉触底事件的处理函数*/onReachBottom:function(){},/***用户点击右上角分享*/onShareAppMessage:function(){}})复制代码12.

wxss:

Page{background-color:#f1f1f1;}.swiper-tab{background-color:#fff;width:100%;text-align:center;line-height:80rpx;}.swiper-tab-list{font-size:30rpx;display:inline-block;width:50%;color:#797979;}.on{color:#5fdafe;border-bottom:5rpxsolid#30d1ff;}.swiper-box{display:block;height:100%;width:100%;overflow:hidden;}复制代码13.

达叔小生：往后余生，唯独有你Youandme,wearefamily!90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通简书博客：达叔小生www.jianshu.com/u/c785ece60…

结语下面我将继续对其他知识深入讲解，有兴趣可以继续关注小礼物走一走or点赞