微信小程序中如何实现分页滑动栏
这篇文章将为大家详细讲解有关微信小程序中如何实现分页滑动栏,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司:自2013年创立以来为各行业开拓出企业自己的“网站建设”服务,为上千公司企业提供了专业的网站设计、成都网站制作、网页设计和网站推广服务, 按需开发网站由设计师亲自精心设计,设计的效果完全按照客户的要求,并适当的提出合理的建议,拥有的视觉效果,策划师分析客户的同行竞争对手,根据客户的实际情况给出合理的网站构架,制作客户同行业具有领先地位的。
功能:
1.分页栏与滑动视图绑定
2.点击分页栏自动滑动到对应视图
3.滑动的到视图对应分页栏自动显示选中样式
上代码
wxml
<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>
</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') } })
关于“微信小程序中如何实现分页滑动栏”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
当前名称:微信小程序中如何实现分页滑动栏
本文URL:http://scyanting.com/article/igpjhc.html