微信小程序中如何实现分页滑动栏

这篇文章将为大家详细讲解有关微信小程序中如何实现分页滑动栏，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

功能：

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

上代码

wxml

<viewclass="tapNav">
<viewclass="pw_tabArr.tabCurrentIndex==0?'active':''"data-index="0"bindtap="veHandle">分页标签1</view>
<viewclass="pw_tabArr.tabCurrentIndex==1?'active':''"data-index="1"bindtap="veHandle">分页标签2</view>
<viewclass="pw_tabArr.tabCurrentIndex==2?'active':''"data-index="2"bindtap="veHandle">分页标签3</view>
</view>
<swiperid="swiper"indicator-dots="pw_indicatorDots"
autoplay="pw_autoplay"interval="pw_interval"duration="pw_duration"current="pw_current"bindchange="swiperChange">
<blockwx:for="pw_imgUrls">
<swiper-itemid="swiper-item">
<imageid="imgae"src="pw_item"class="slide-image"width="355"height="150"/>
</swiper-item>
</block>

</swiper>

wxss

/*
1.横向排列分页标签
2.每个分页标签各占1/3
*/
.tapNav{
display:flex;
flex-direction:row;
}
.tapNavview{
flex:1;
width:200rpx;
height:100rpx;
text-align:center;
line-height:100rpx;
font-family:"微软雅黑";
}
/*选中样式*/
.tapNav.active{
color:blue;
border-bottom:4rpxsolidmediumseagreen;
}
#swiper{
margin-top:40rpx;
}
#swiperimage{
width:100%;
}

js

//index.js
//获取应用实例
varapp=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)
varcurrentIndex=e.target.dataset.index
this.setData({
current:currentIndex,
"tabArr.tabCurrentIndex":currentIndex
})
},
//通过滑块视图的current改变触发事件
swiperChange:function(e){
//获取视图滑块当前的current
//用此数值替换分页标签的current的值
console.log(e.detail.current)
varswiperCurrent=e.detail.current;
this.setData({
'tabArr.tabCurrentIndex':swiperCurrent
})
},
onLoad:function(){
console.log('onLoad')
}
})

关于“微信小程序中如何实现分页滑动栏”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。