效果图,既可以点击切换,又可以滑动切换
.wxml
.wxss /* pages/detail/detail.wxss */ .swiper-tab{ width: 100%; border-bottom: 2rpx solid #ccc; text-align: center; height: 88rpx; line-height: 88rpx; display: flex; flex-flow: row; justify-content: space-between; } .swiper-tab-item{ width: 30%; color:#434343; } .active{ color:#F65959; border-bottom: 4rpx solid #F65959; } swiper{ text-align: center; } .js // pages/detail/detail.js var app = getApp() Page({ data: { currentTab: 0 }, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 }, //滑动切换 swiperTab: function (e) { var that = this; that.setData({ currentTab: e.detail.current }); }, //点击切换 clickTab: function (e) { var that = this; if (this.data.currentTab === e.target.dataset.current) { return false; } else { that.setData({ currentTab: e.target.dataset.current }) } } }) |
微信小程序的tab选项卡的实现
发布:2018-04-25 10:13浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08