微信小程序开发之分页滑动栏代码展示

本文实例为大家分享了微信小程序分页滑动栏的具体代码，供大家参考，具体内容如下

功能：

1.分页栏与滑动视图绑定 2.点击分页栏自动滑动到对应视图 3.滑动的到视图对应分页栏自动显示选中样式

上代码

wxml<view></swiper>

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') }})以上就是微信小程序开发之分页滑动栏代码展示的详细内容，更多请关注小潘博客其它相关文章！