<view class="tapNav"> <view class="{{tabArr.tabCurrentIndex==0?'active':''}}" data-index="0" bindtap="veHandle">分頁標(biāo)簽1</view> <view class="{{tabArr.tabCurrentIndex==1?'active':''}}" data-index="1" bindtap="veHandle">分頁標(biāo)簽2</view> <view class="{{tabArr.tabCurrentIndex==2?'active':''}}" data-index="2" bindtap="veHandle">分頁標(biāo)簽3</view></view><swiper id="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{current}}" bindchange="swiperChange"> <block wx:for="{{imgUrls}}"> <swiper-item id="swiper-item">  <image id="imgae" src="{{item}}" class="slide-image" width="355" height="150"/> </swiper-item> </block>

/*1.橫向排列分頁標(biāo)簽2.每個分頁標(biāo)簽各占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%;}

//index.js//獲取應(yīng)用實(shí)例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' ], //是否顯示面板指示點(diǎn) indicatorDots: true, //自動播放 autoplay: true, //切換時間間隔 interval: 2000, //滑動時長 duration: 1000, //存放滑動視圖的current current:0, //分頁標(biāo)簽class條件判斷的值 tabArr:{  tabCurrentIndex:0 } }, //事件處理函數(shù) //觸摸分頁標(biāo)簽觸發(fā)事件 veHandle:function(e){ //每個分頁標(biāo)簽都設(shè)置了data-index,觸摸觸發(fā)事件獲取此數(shù)值 //用此數(shù)值替換滑動視圖的current //用此數(shù)值替換分頁標(biāo)簽class判斷的值 console.log(e.target.dataset.index) var currentIndex = e.target.dataset.index this.setData({  current:currentIndex,  "tabArr.tabCurrentIndex":currentIndex }) }, //通過滑塊視圖的current改變觸發(fā)事件 swiperChange:function(e){ //獲取視圖滑塊當(dāng)前的current //用此數(shù)值替換分頁標(biāo)簽的current的值 console.log(e.detail.current) var swiperCurrent = e.detail.current; this.setData({  'tabArr.tabCurrentIndex':swiperCurrent }) }, onLoad: function () { console.log('onLoad') }})