10行代码实现微信小程序滑动tab切换
本文实例为大家分享了微信小程序滑动tab切换展示的具体代码,供大家参考,具体内容如下
创新互联建站长期为千余家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为宁海企业提供专业的网站设计、成都做网站,宁海网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。
效果预览:
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部分:
.tab{ height: 50px; width: 80px; display: inline-block; text-align: center; line-height: 50px; } .tab:nth-child(odd){ background-color: #ccc; } .content{ width: 100%; height: 200px; text-align: center; line-height: 200px; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
网站标题:10行代码实现微信小程序滑动tab切换
转载来于:http://myzitong.com/article/jjipjs.html