微信小程序模板之分頁滑動(dòng)欄
本文實(shí)例為大家分享了微信小程序分頁滑動(dòng)欄的具體代碼,供大家參考,具體內(nèi)容如下
功能:
1.分頁欄與滑動(dòng)視圖綁定
2.點(diǎn)擊分頁欄自動(dòng)滑動(dòng)到對(duì)應(yīng)視圖
3.滑動(dòng)的到視圖對(duì)應(yīng)分頁欄自動(dòng)顯示選中樣式
效果圖
上代碼
wxml
<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> </swiper>
wxss
/* 1.橫向排列分頁標(biāo)簽 2.每個(gè)分頁標(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%; }
js
//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, //自動(dòng)播放 autoplay: true, //切換時(shí)間間隔 interval: 2000, //滑動(dòng)時(shí)長(zhǎng) duration: 1000, //存放滑動(dòng)視圖的current current:0, //分頁標(biāo)簽class條件判斷的值 tabArr:{ tabCurrentIndex:0 } }, //事件處理函數(shù) //觸摸分頁標(biāo)簽觸發(fā)事件 veHandle:function(e){ //每個(gè)分頁標(biāo)簽都設(shè)置了data-index,觸摸觸發(fā)事件獲取此數(shù)值 //用此數(shù)值替換滑動(dòng)視圖的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') } })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序?qū)崙?zhàn)之上拉(分頁加載)效果(2)
- 微信小程序分頁加載的實(shí)例代碼
- 微信小程序云開發(fā)實(shí)現(xiàn)數(shù)據(jù)添加、查詢和分頁
- 微信小程序?qū)崿F(xiàn)移動(dòng)端滑動(dòng)分頁效果(ajax)
- 微信小程序?qū)崿F(xiàn)分頁加載效果
- 微信小程序?qū)崿F(xiàn)瀑布流分頁滾動(dòng)加載
- 微信小程序?qū)崿F(xiàn)下拉刷新和上拉分頁效果的方法詳解
- 微信小程序之搜索分頁功能的實(shí)現(xiàn)代碼
- 微信小程序?qū)崿F(xiàn)分頁查詢?cè)斀?/a>
- 微信小程序?qū)崿F(xiàn)本地分頁加載
相關(guān)文章
淺談SpringMVC中post checkbox 多選框value的值(隱藏域方式)
下面小編就為大家分享一篇淺談SpringMVC中post checkbox 多選框value的值(隱藏域方式),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01uniapp實(shí)現(xiàn)上拉加載更多功能的全過程
我們?cè)陧?xiàng)目中經(jīng)常使用到上拉加載更多,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)上拉加載更多功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10js深度合并兩個(gè)數(shù)組對(duì)象的實(shí)現(xiàn)
這篇文章主要介紹了js深度合并兩個(gè)數(shù)組對(duì)象的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12純html+css+javascript實(shí)現(xiàn)樓層跳躍式的頁面布局(實(shí)例代碼)
這篇文章主要介紹了純html+css+javascript實(shí)現(xiàn)樓層跳躍式的頁面布局,需要的朋友可以參考下2017-10-10BootStrap使用file-input插件上傳圖片的方法
這篇文章主要介紹了BootStrap使用file-input插件上傳圖片的方法,bootstrap的圖片上傳框架 file-input 插件非常不錯(cuò),下面小編通過本文介紹下這個(gè)插件的使用方法,感興趣的朋友一起看看吧2016-09-09詳解使用mocha對(duì)webpack打包的項(xiàng)目進(jìn)行"冒煙測(cè)試"的大致流程
這篇文章主要介紹了詳解使用mocha對(duì)webpack打包的項(xiàng)目進(jìn)行"冒煙測(cè)試"的大致流程,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04Bootstrap?按鈕下拉菜單的實(shí)現(xiàn)示例
本文主要介紹了Bootstrap?按鈕下拉菜單的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07js判斷手機(jī)訪問或者PC的幾個(gè)例子(常用于手機(jī)跳轉(zhuǎn))
js判斷手機(jī)或者PC的例子我們?cè)趲缀跛芯W(wǎng)站都會(huì)有這段代碼了,現(xiàn)在手機(jī)流量與pc差不多了,下面來看兩段js判斷手機(jī)或者PC例子吧2015-12-12淺談webpack打包生成的bundle.js文件過大的問題
下面小編就為大家分享一篇淺談webpack打包生成的bundle.js文件過大的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02Tesseract.js使用純js實(shí)現(xiàn)的OCR文字識(shí)別
Tesseract.js是流行的Tesseract OCR引擎的純Javascript端口,這個(gè)庫(kù)支持100多種語言,自動(dòng)文本定位和腳本檢測(cè),一個(gè)簡(jiǎn)單的界面,用于閱讀段落、單詞和字符邊界框,Tesseract.js既可以在瀏覽器中運(yùn)行,也可以在帶有NodeJS的服務(wù)器上運(yùn)行2023-10-10