最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
10行代码实现微信小程序滑动tab切换
时间:2018-12-29 编辑:猪哥 来源:一聚教程网
本文实例为大家分享了微信小程序滑动tab切换展示的具体代码,供大家参考,具体内容如下
效果预览:
js部分:
Page({ data: { arr: [1,2,3,4,5,6,7,8], index: 1 }, onLoad: function (options) { this.setData({ childW: this.data.arr.length * 80 }); }, tabOn: function (e) { this.setData({ index: e.currentTarget.dataset.index + 1 }); } })
wxtml部分:
{{ item }} 内容一 内容二 内容三 内容四 内容五 内容六 内容七 内容八
wxss部分:
css;">.tab{ display: inline-block; text-align: center; line- } .tab:nth-child(odd){ background-color: #ccc; } .content{ width: 100%; text-align: center; line- }
-
上一个: 微信小程序实现复选框效果
-
下一个: 微信小程序自定义可滑动日历界面
相关文章
- 微信湖北电子健康卡静态码怎么申请 微信湖北电子健康卡静态码申请方法 04-27
- 微信怎么解除亲密付 微信解除亲密付方法 04-26
- 微信内测朋友圈内容怎么转发 微信内测朋友圈内容转发方法 04-24
- 微信怎么预约九价疫苗 微信预约九价疫苗方法 04-18
- 微信支付有优惠金币如何送别人 微信支付有优惠金币送别人方法 04-18
- 微信智汇小区团购订单怎么查询 微信智汇小区团购订单查询方法 04-17