小程序實現頁面頂部選項卡效果

更新時間：2018年11月06日 15:00:21 作者：jackie_bobo

這篇文章主要為大家詳細介紹了小程序實現頁面頂部選項卡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了小程序實現選項卡效果的具體代碼，供大家參考，具體內容如下

效果圖：

<!--index.wxml--> 
<view class="swiper-tab" > 
  <view bindtap="swithNav" wx:for="{{tabCont}}" wx:key="item.index" class="swiper-tab-list {{currentTab==item.index?'active':''}}" data-current='{{item.index}}' >{{item.title}}</view> 
</view> 
<swiper class="swiper-box" current="{{currentTab}}" duration="300" style="height:400px" bindchange="GetCurrentTab" data-current='6' > 
  <swiper-item wx:for="{{tabCont}}" wx:key="item.index"> 
   <image src='{{item.pic}}'></image>
   <view>{{item.title}}</view>
  </swiper-item> 
</swiper>

CSS:

/**index.wxss**/

/**index.wxss**/

.swiper-tab {
 line-height: 80rpx;
 border: 1px solid #ccc;
 display: flex;
 justify-content: space-around;
 align-items: center;
}

.swiper-tab-list {
 font-size: 30rpx;
 color: #777;
 text-align: center;
}

.active {
 color: #da7c0c;
 border-bottom: 5rpx solid #da7c0c;
}

.swiper-box {
 display: block;
 height: 100%;
 width: 100%;
 overflow: hidden;
}

.swiper-box view {
 text-align: center;
}

image {
 width: 100%;
}

js：

Page({

 /**
  * 頁面的初始數據
  */
 data: {
  currentTab:0,
  tabCont: [{ "title": "tab1", "pic": "../../img/1.jpg", "index": "0" }, { "title": "tab2", "pic": "../../img/2.jpg", "index": "1" }, { "title": "tab3", "pic": "../../img/3.jpg", "index": "2" }, { "title": "tab4", "pic": "../../img/2.jpg", "index": "3" }, { "title": "tab5", "pic": "../../img/2.jpg", "index": "4" }, { "title": "tab6", "pic": "../../img/2.jpg", "index": "5" }, { "title": "tab7", "pic": "../../img/2.jpg", "index": "6" }, { "title": "tab8", "pic": "../../img/2.jpg", "index": "7" }, { "title": "tab9", "pic": "../../img/2.jpg", "index": "8" }],
 },

 /**
  * 生命周期函數--監(jiān)聽頁面加載
  */
 onLoad: function (options) {

 },

 /**
  * 生命周期函數--監(jiān)聽頁面初次渲染完成
  */
 onReady: function () {

 },

 /**
  * 生命周期函數--監(jiān)聽頁面顯示
  */
 onShow: function () {

 },

 /**
  * 生命周期函數--監(jiān)聽頁面隱藏
  */
 onHide: function () {

 },

 /**
  * 生命周期函數--監(jiān)聽頁面卸載
  */
 onUnload: function () {

 },

 /**
  * 頁面相關事件處理函數--監(jiān)聽用戶下拉動作
  */
 onPullDownRefresh: function () {

 },

 /**
  * 頁面上拉觸底事件的處理函數
  */
 onReachBottom: function () {

 },

 /**
  * 用戶點擊右上角分享
  */
 onShareAppMessage: function () {

 },
 // swiper滑動時觸發(fā)bindchange事件，獲取事件對象e獲取當前所在滑塊的 index，并將其更新至data的currentTab中，視圖渲染通過判斷currentTab的讓對應的tab hover。
 GetCurrentTab:function(e){
  console.log(e.detail.current);
  var that = this;
  this.setData({
   currentTab:e.detail.current
  });
  // console.log("11111"+this.data.currentTab);
 },
 swithNav:function(e){
  var that = this;
  that.setData({
   currentTab:e.target.dataset.current
  });

 }
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: