介绍 & lt; view 类=皊wiper-tab"比;
& lt;才能view 类=皊wiper-tab-item {{currentTab==0 ? & # 39;活跃# 39;:& # 39;& # 39;}}“,数据流=?“,bindtap=癱lickTab"在一& lt;/view>
& lt;才能view 类=皊wiper-tab-item {{currentTab==1 ? & # 39;活跃# 39;:& # 39;& # 39;}}“,数据流=?“,bindtap=癱lickTab"在二& lt;/view>
& lt;才能view 类=皊wiper-tab-item {{currentTab==2 ? & # 39;活跃# 39;:& # 39;& # 39;}}“,数据流=?“,bindtap=癱lickTab"在三& lt;/view>
& lt;/view>
& lt; swiper 电流=皗{currentTab}}“,时间=?00“,bindchange=皊wiperTab"比;
& 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> var 应用=getApp ()
页面({
,数据:{
,currentTab: 0
},
,onLoad:功能(选项){//才能,页面初始化,选项为页面跳转所带来的参数
},
,//滑动切换
,swiperTab:函数(,e ) {
var 才能;这=;
that.setData({才能
,,currentTba: e.detail.current
,,});
},
,//点击切换
,clickTab:函数(),e , {,
var 才能;that =,,,
如果才能(,this.data.currentTab ===, e.target.dataset.current ), {,
,,return 虚假,
,,},else {,
,,,that.setData ({,
,,,currentTab:, e.target.dataset.current
,,}),
,,},
}大敌;
}) .swiper-tab {
,,宽度:100%;
边界底部才能:2 rpx solid # ccc;
,,text-align:中心;
,,身高:88 rpx;
,,行高:88 rpx;
,,粗细:大胆的;
}
.swiper-tab-item {
,,显示:inline-block;
,,宽度:33.33%;
,,颜色:红色;
}
.active {
颜色:才能水;
边界底部才能:4 rpx solid 红色;
}
这篇文章主要介绍微信小程序中如何制作选项卡,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>微信小程序之选项卡的实现方法
<强>前言:
从事前端的同学们一定不会对选项卡陌生,不管是自己原生写的,还是各个UI框架里带的,我想大家都使用过很多选项卡,对选项卡的原理也足够清楚了,下面我们来在微信小程序里实现选项卡的功能。
微信小程序里没有自带选项卡组件,但是却带有偷窃者组件,所以,我们便利用读卡器来实现选项卡的功能。
先看效果图:
实现代码:
页面代码:
js代码:
css代码:
以上是“微信小程序中如何制作选项卡”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
