微信小程序如何实现顶部选项卡偷窃者 - 行业资讯 - 肥雀云

　　介绍

这篇文章给大家分享的是有关微信小程序如何实现顶部选项卡偷窃者的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

效果图:

下面直接上代码:

wxml:

& lt; !——页面/索引/index.wxml祝辞, 　　& lt; view 类=皊wiper-tab"祝辞, 　　,& lt; view 类=皌ab-item {{currentTab==0, ?, & # 39;在# 39;,:,& # 39;& # 39;}}“,数据流=?“,bindtap=皊wichNav"在选项一& lt;/view>, 　　,& lt; view 类=皌ab-item {{currentTab==1, ?, & # 39;在# 39;,:,& # 39;& # 39;}}“,数据流=?“,bindtap=皊wichNav"在选项二& lt;/view>, 　　,& lt; view 类=皌ab-item {{currentTab==2, ?, & # 39;在# 39;,:,& # 39;& # 39;}}“,数据流=?“,bindtap=皊wichNav"在选项三& lt;/view>, 　　时间/view> & lt; 　　, 　　& lt; swiper 电流=皗{currentTab}}“,类=皊wiper",时间=?00“,风格=案叨?{{winHeight 安康;30}}px", bindchange=癰indChange"祝辞, 　　& lt; swiper-item>大敌; 　　& lt;才能view>页面一& lt;/view>, 　　& lt;/swiper-item>大敌; 　　& lt; swiper-item>大敌; 　　& lt;才能view>页面二& lt;/view>, 　　& lt;/swiper-item>大敌; 　　& lt; swiper-item>大敌; 　　& lt;才能view>页面三& lt;/view>, 　　& lt;/swiper-item>大敌; 　　& lt;/swiper>

wxs:

/*,页/索引/index.wxss */, 　　.swiper-tab {, 　　,宽度:100%,, 　　,text-align:,中心; 　　,行高:80 rpx;, 　　,边界底部:1 px solid # 000;, 　　,显示:flex,, 　　,flex-direction:行,, 　　,justify-content:,中心; 　　}, 　　.tab-item {, 　　,flex:, 1; 　　,字体大小:30 rpx;, 　　,显示:inline-block;,, 　　,颜色:# 777777;, 　　}, 　　碧绿{, 　　,颜色:红色,, 　　,边界底部:5 rpx solid 红色,, 　　}, 　　.swiper{,显示:块;,高度:,100%;,宽度:,100%;,溢出:,隐藏,,}, 　　{.swiper 视图, 　　,text-align:,中心; 　　100年,padding-top: rpx;, 　　}

js:

//,/索引页面/index.js 　　页面({, 　　,/* *大敌; 　　*,才能页面的初始数据, 　　*/才能, 　　数据:,{大敌; 　　winWidth才能:0,, 　　winHeight才能:0,, 　　currentTab才能:0, 　　},大敌; 　　,/* *大敌; 　　*,才能生命周期函数——监听页面加载, 　　*/才能, 　　,onLoad: function (选项),{, 　　var 才能;that =,,, 　　,/* *,才能　　,,*,获取系统信息, 　　,,*/, 　　,wx.getSystemInfo({大敌; 　　, 　　,,,成功:function (res), {, 　　,,,that.setData ({, 　　,,,,winWidth:, res.windowWidth,, 　　,,,,winHeight:, res.windowHeight 　　,,,}),, 　　,,}, 　　, 　　,,}); 　　},大敌; 　　,bindChange: function (e), {, 　　, 　　var 才能;that =,,, 　　that.setData才能({,currentTab: e.detail.current }),, 　　, 　　},大敌; 　　,swichNav: function (e), {, 　　, 　　var 才能;that =,,, 　　, 　　if 才能;(this.data.currentTab ===, e.target.dataset.current), {, 　　,,return 虚假, 　　,,},else {, 　　,,that.setData ({, 　　,,,currentTab:, e.target.dataset.current 　　,,}), 　　,,}, 　　,},,/* *大敌; 　　*,才能页面相关事件处理函数——监听用户下拉动作, 　　*/才能, 　　,onPullDownRefresh: function (), {, 　　, 　　},大敌; 　　,/* *大敌; 　　*,才能页面上拉触底事件的处理函数, 　　*/才能, 　　,onReachBottom: function (), {, 　　, 　　},大敌; 　　,/* *大敌; 　　*,才能用户点击右上角分享, 　　*/才能, 　　,onShareAppMessage: function (), {, 　　, 　　}大敌; 　　})

感谢各位的阅读!关于“微信小程序如何实现顶部选项卡读卡器”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!