本文实例为大家分享了微信小程序分页滑动栏的具体代码，供大家参考，具体内容如下
功能：
1.分页栏与滑动视图绑定
2.点击分页栏自动滑动到对应视图
3.滑动的到视图对应分页栏自动显示选中样式
上代码
wxml
分页标签1 分页标签2 分页标签3
登录后复制
wxss
/*1.横向排列分页标签2.每个分页标签各占1/3*/.tapNav { display: flex; flex-direction: row;}.tapNav view{ flex:1; width:200rpx; height:100rpx; text-align: center; line-height: 100rpx; font-family: "微软雅黑";}/*选中样式*/.tapNav .active { color:blue; border-bottom:4rpx solid mediumseagreen;}#swiper { margin-top:40rpx;}#swiper image{ width:100%;}
登录后复制
js
//index.js//获取应用实例var app = getApp()Page({ data: { // 图片地址 imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], //是否显示面板指示点 indicatorDots: true, //自动播放 autoplay: true, //切换时间间隔 interval: 2000, //滑动时长 duration: 1000, //存放滑动视图的current current:0, //分页标签class条件判断的值 tabArr:{ tabCurrentIndex:0 } }, //事件处理函数 //触摸分页标签触发事件 veHandle:function(e){ //每个分页标签都设置了data-index,触摸触发事件获取此数值 //用此数值替换滑动视图的current //用此数值替换分页标签class判断的值 console.log(e.target.dataset.index) var currentIndex = e.target.dataset.index this.setData({ current:currentIndex, "tabArr.tabCurrentIndex":currentIndex }) }, //通过滑块视图的current改变触发事件 swiperChange:function(e){ //获取视图滑块当前的current //用此数值替换分页标签的current的值 console.log(e.detail.current) var swiperCurrent = e.detail.current; this.setData({ 'tabArr.tabCurrentIndex':swiperCurrent }) }, onLoad: function () { console.log('onLoad') }})
登录后复制
以上就是微信小程序开发之分页滑动栏代码展示的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/1523767.html
