微信小程序模板之分頁滑動欄
更新時間:2022年08月24日 11:45:56 作者:騎白馬的大師兄
這篇文章主要為大家詳細介紹了微信小程序模板之分頁滑動欄的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序分頁滑動欄的具體代碼,供大家參考,具體內(nèi)容如下
功能:
1.分頁欄與滑動視圖綁定
2.點擊分頁欄自動滑動到對應視圖
3.滑動的到視圖對應分頁欄自動顯示選中樣式
效果圖
上代碼
wxml
<view class="tapNav"> <view class="{{tabArr.tabCurrentIndex==0?'active':''}}" data-index="0" bindtap="veHandle">分頁標簽1</view> <view class="{{tabArr.tabCurrentIndex==1?'active':''}}" data-index="1" bindtap="veHandle">分頁標簽2</view> <view class="{{tabArr.tabCurrentIndex==2?'active':''}}" data-index="2" bindtap="veHandle">分頁標簽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> </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 } }, //事件處理函數(shù) //觸摸分頁標簽觸發(fā)事件 veHandle:function(e){ //每個分頁標簽都設置了data-index,觸摸觸發(fā)事件獲取此數(shù)值 //用此數(shù)值替換滑動視圖的current //用此數(shù)值替換分頁標簽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){ //獲取視圖滑塊當前的current //用此數(shù)值替換分頁標簽的current的值 console.log(e.detail.current) var swiperCurrent = e.detail.current; this.setData({ 'tabArr.tabCurrentIndex':swiperCurrent }) }, onLoad: function () { console.log('onLoad') } })
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
淺談SpringMVC中post checkbox 多選框value的值(隱藏域方式)
下面小編就為大家分享一篇淺談SpringMVC中post checkbox 多選框value的值(隱藏域方式),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01純html+css+javascript實現(xiàn)樓層跳躍式的頁面布局(實例代碼)
這篇文章主要介紹了純html+css+javascript實現(xiàn)樓層跳躍式的頁面布局,需要的朋友可以參考下2017-10-10BootStrap使用file-input插件上傳圖片的方法
這篇文章主要介紹了BootStrap使用file-input插件上傳圖片的方法,bootstrap的圖片上傳框架 file-input 插件非常不錯,下面小編通過本文介紹下這個插件的使用方法,感興趣的朋友一起看看吧2016-09-09詳解使用mocha對webpack打包的項目進行"冒煙測試"的大致流程
這篇文章主要介紹了詳解使用mocha對webpack打包的項目進行"冒煙測試"的大致流程,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04淺談webpack打包生成的bundle.js文件過大的問題
下面小編就為大家分享一篇淺談webpack打包生成的bundle.js文件過大的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02Tesseract.js使用純js實現(xiàn)的OCR文字識別
Tesseract.js是流行的Tesseract OCR引擎的純Javascript端口,這個庫支持100多種語言,自動文本定位和腳本檢測,一個簡單的界面,用于閱讀段落、單詞和字符邊界框,Tesseract.js既可以在瀏覽器中運行,也可以在帶有NodeJS的服務器上運行2023-10-10