国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

微信小程序實現頂部選項卡(swiper)

來源:懂視網 責編:小采 時間:2020-11-27 22:31:31
文檔

微信小程序實現頂部選項卡(swiper)

微信小程序實現頂部選項卡(swiper):微信小程序頂部選項卡在開發中是非常常用的,下面用一點時間實現了一下。 效果圖: 下面直接上代碼: wxml: <!--pages/index/index.wxml--> <view class=swiper-tab> <view class=tab-item {{cur
推薦度:
導讀微信小程序實現頂部選項卡(swiper):微信小程序頂部選項卡在開發中是非常常用的,下面用一點時間實現了一下。 效果圖: 下面直接上代碼: wxml: <!--pages/index/index.wxml--> <view class=swiper-tab> <view class=tab-item {{cur

微信小程序頂部選項卡在開發中是非常常用的,下面用一點時間實現了一下。

效果圖:

下面直接上代碼:

wxml:

<!--pages/index/index.wxml--> 
<view class="swiper-tab"> 
 <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">選項一</view> 
 <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">選項二</view> 
 <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">選項三</view> 
</view> 
 
<swiper current="{{currentTab}}" class="swiper" duration="300" style="height:{{winHeight - 30}}px" bindchange="bindChange"> 
 <swiper-item> 
 <view>頁面一</view> 
 </swiper-item> 
 <swiper-item> 
 <view>頁面二</view> 
 </swiper-item> 
 <swiper-item> 
 <view>頁面三</view> 
 </swiper-item> 
</swiper> 

wxss:

/* pages/index/index.wxss */ 
.swiper-tab{ 
 width: 100%; 
 text-align: center; 
 line-height: 80rpx; 
 border-bottom: 1px solid #000; 
 display: flex; 
 flex-direction: row; 
 justify-content: center; 
} 
.tab-item{ 
 flex: 1; 
 font-size: 30rpx; 
 display: inline-block; 
 color: #777777; 
} 
.on{ 
 color: red; 
 border-bottom: 5rpx solid red; 
} 
.swiper{ display: block; height: 100%; width: 100%; overflow: hidden; } 
.swiper view{ 
 text-align: center; 
 padding-top: 100rpx; 
} 

js:

// pages/index/index.js 
Page({ 
 
 /** 
 * 頁面的初始數據 
 */ 
 data: { 
 winWidth:0, 
 winHeight:0, 
 currentTab:0 
 }, 
 
 /** 
 * 生命周期函數--監聽頁面加載 
 */ 
 onLoad: function (options) { 
 var that = this; 
 
 /** 
 * 獲取系統信息 
 */ 
 wx.getSystemInfo({ 
 
 success: function (res) { 
 that.setData({ 
 winWidth: res.windowWidth, 
 winHeight: res.windowHeight 
 }); 
 } 
 
 }); 
 }, 
 bindChange: function (e) { 
 
 var that = this; 
 that.setData({ currentTab: e.detail.current }); 
 
 }, 
 swichNav: function (e) { 
 
 var that = this; 
 
 if (this.data.currentTab === e.target.dataset.current) { 
 return false; 
 } else { 
 that.setData({ 
 currentTab: e.target.dataset.current 
 }) 
 } 
 } , 
 /** 
 * 頁面相關事件處理函數--監聽用戶下拉動作 
 */ 
 onPullDownRefresh: function () { 
 
 }, 
 
 /** 
 * 頁面上拉觸底事件的處理函數 
 */ 
 onReachBottom: function () { 
 
 }, 
 
 /** 
 * 用戶點擊右上角分享 
 */ 
 onShareAppMessage: function () { 
 
 } 
}) 

以上是實現過程,總體上沒什么難度。可以參考參考。

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

微信小程序實現頂部選項卡(swiper)

微信小程序實現頂部選項卡(swiper):微信小程序頂部選項卡在開發中是非常常用的,下面用一點時間實現了一下。 效果圖: 下面直接上代碼: wxml: <!--pages/index/index.wxml--> <view class=swiper-tab> <view class=tab-item {{cur
推薦度:
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 欧美天天搞| 国产精品高清一区二区三区不卡 | 国产一级淫片免费播放 | 亚洲国产成人精品久久 | 国产日韩欧美亚洲综合在线 | 在线国产视频 | 国产成人久久精品区一区二区 | 欧美成人久久电影香蕉 | 亚洲国产系列一区二区三区 | 韩日欧美 | 国产中文久久精品 | 亚洲一区中文字幕在线 | 成人欧美一区二区三区在线 | 精品国产乱码久久久久久浪潮 | 欧洲亚洲欧美国产日本高清 | 精品一区二区三区亚洲 | 精品久久久久中文字幕日本 | 久久精品免费一区二区视 | 成人精品视频在线观看完整版 | 国产精品视频一区二区三区经 | 欧美视频区 | 一级全黄60分钟免费网站 | 欧美视频精品在线 | 久热中文字幕在线精品首页 | 亚洲国产欧美日韩精品一区二区三区 | 成人欧美一区二区三区 | 亚洲日本乱码中文论理在线电影 | 国产超级乱淫片中文 | 亚洲成人一区二区 | 欧美精品亚洲精品日韩专区va | 国产一精品一aⅴ一免费 | 自拍偷自拍亚洲精品情侣 | 九九久久国产 | 欧美日韩精品一区二区三区 | 亚洲页码 | 成人国产一区二区三区精品 | 一级久久 | 精品国产欧美一区二区三区成人 | 天天操天天插天天干 | 精品一区二区三区在线播放 | 欧美 日韩 高清 |