微信小程序模板之分页滑动栏

微信小程序模板之分页滑动栏

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

功能：

1.分页栏与滑动视图绑定

2.点击分页栏自动滑动到对应视图

3.滑动的到视图对应分页栏自动显示选中样式

效果图

上代码

wxml

分页标签1

分页标签2

分页标签3

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{current}}" bindchange="swiperChange">

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{current}}" bindchange="swiperChange">

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

/http:///获取应用实例

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')

}

})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。