WeChat applet development paging sliding bar code display

巴扎黑
Release: 2017-09-12 09:59:33
Original
2650 people have browsed it

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

功能:

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>
Copy after login

</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%;
}
Copy after login

js

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
 // 图片地址
 imgUrls: [
  &#39;http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg&#39;,
  &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg&#39;,
  &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg&#39;
 ],
 //是否显示面板指示点
 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({
  &#39;tabArr.tabCurrentIndex&#39;:swiperCurrent
 })
 },
 onLoad: function () {
 console.log(&#39;onLoad&#39;)
 }
})
Copy after login

The above is the detailed content of WeChat applet development paging sliding bar code display. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template