全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[呼和浩特seo公司搜久澳]微信小程序开发之分页滑动栏代码展示

  本文实例为大家分享了微信小程序分页滑动栏的具体代码,供大家参考,新泰市小程序开发哪家好珲春市小程序开发哪家好具体内容如下

  功能:

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

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

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

 

  上代码

 

  wxml

  

&◁▽◇;lt;view class="tapNav">●◁▷•;
 <view class="◁•;pw_tabArr.tabCurrentIndex==0?'■▼…;active'★…★;◆-…★:''"○•◇; data-index="0" bindtap="veHandle">分页标签1&★◆○▷;lt▲▲■;/view>
 &lt▲■;view class="pw_tabArr☆◁.tabCurrentIndex==1…=◇=?'active'-▼★;•…△■:''□☆◆;" data-index="•★;1" bindtap="veHandle"▲▪○;>分页标签2&★▲;lt;/view>
 <view class="pw_tabArr.tabCurrentIndex==2★…▽•?'active'•☆;▷◇■▷:''○◁;" data-index="=▪;2" bindtap="veHandle"▼●•▷;>分页标签3&lt◇□;/view>
</view>
<swiper id="swiper" indicator-dots="pw_indicatorDots"▲•;
 autoplay="-•▪•;pw_autoplay" interval="=▲;pw_interval"★•; duration="pw_duration" current="pw_current" bindchange="swiperChange"•△◆◇;>
 &lt▷▲;block wx:for="pw_imgUrls"■▽▽•;>•▪;
 &lt★●;swiper-item id="▼▷●△;swiper-item"▽●□-;>△-;
 &▪●★•;lt;image id="•◆◆△;imgae" src="◁●◆;pw_item" class="slide-image"▼•□●; width="355"=……▼; height="▽★;150"/>△□=…;
 &-▽;lt▽★;/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')
 }
})

 

  以上就是微信小程序开发之分页滑动栏代码展示的详细内容,[天水seo公司联系久澳]微信小程序之开发环境的搭建 (图文)[呼和浩特seo公司搜久澳]更多请关注久澳传媒编程栏目其它相关文章!

[呼和浩特seo公司搜久澳]微信小程序开发之分页滑动栏代码展示

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。