本文实例为大家分享了微信小程序分页滑动栏的具体代码，供大家参考，具体内容如下
功能：
1.分页栏与滑动视图绑定
2.点击分页栏自动滑动到对应视图
3.滑动的到视图对应分页栏自动显示选中样式
上代码
wxml
1 2 3 4 5 6 7 8 9 10 11 12 | <view class="tapNav">
<view class="pw_tabArr.tabCurrentIndex==0?'active':''" data-index="0" bindtap="veHandle">分页标签1</view>
<view class="pw_tabArr.tabCurrentIndex==1?'active':''" data-index="1" bindtap="veHandle">分页标签2</view>
<view class="pw_tabArr.tabCurrentIndex==2?'active':''" data-index="2" bindtap="veHandle">分页标签3</view>
</view>
<swiper id="swiper" indicator-dots="pw_indicatorDots"
autoplay="pw_autoplay" interval="pw_interval" duration="pw_duration" current="pw_current" bindchange="swiperChange">
<block wx:for="pw_imgUrls">
<swiper-item id="swiper-item">
<image id="imgae" src="pw_item" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
|
wxss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 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:0,
tabArr:{
tabCurrentIndex:0
}
},
veHandle:function(e){
console.log(e.target.dataset.index)
var currentIndex = e.target.dataset.index
this.setData({
current:currentIndex,
"tabArr.tabCurrentIndex":currentIndex
})
},
swiperChange:function(e){
console.log(e.detail.current)
var swiperCurrent = e.detail.current;
this.setData({
'tabArr.tabCurrentIndex':swiperCurrent
})
},
onLoad: function () {
console.log('onLoad')
}
})
|
以上就是微信小程序开发之分页滑动栏代码展示的详细内容。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
