微信小程序選項卡的簡單實例

更新時間：2017年05月24日 14:21:05 投稿：lqh

這篇文章主要介紹了微信小程序選項卡的簡單實例的相關(guān)資料,需要的朋友可以參考下

微信小程序選項卡的簡單實例

看下效果

代碼：

home.wxml

<!--pages/home/home.wxml-->
<view class="swiper-tab"> 
  <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">熱門</view> 
  <view class="swiper-tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">關(guān)注</view> 
  <view class="swiper-tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">好友</view> 
</view> 

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 80}}px" bindchange="bindChange"> 
  <swiper-item> 
   <view>熱門</view> 
  </swiper-item> 
  <swiper-item> 
   <view>關(guān)注</view> 
  </swiper-item> 
  <swiper-item> 
   <view>好友</view> 
  </swiper-item> 
</swiper>

home.wxss

/* pages/home/home.wxss */
.swiper-tab{ 
  width: 100%; 
  border-bottom: 2rpx solid #eeeeee; 
  text-align: center; 
  line-height: 80rpx;} 
.swiper-tab-item{ font-size: 30rpx; 
  display: inline-block; 
  width: 33.33%; 
  color: #666666; 
} 
.on{ color: #f10b2e; 
  border-bottom: 5rpx solid #f10b2e;} 

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

home.js

// pages/home/home.js
var app = getApp()
Page({
 data: {

  winWidth: 0,
  winHeight: 0,
  // tab切換 
  currentTab: 0,
 },
 onLoad: function () {
  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
   })
  }
 }
})

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持!

您可能感興趣的文章:

相關(guān)文章

js中ES6繼承和ES5繼承之間的差別
這篇文章主要介紹了ES6繼承和ES5繼承，以及兩個繼承之間的差別，文中運用示例以及代碼講解的非常清晰，感興趣的小伙伴可以參考一下
2021-08-08
微信小程序視圖層（xx.xml)和邏輯層(xx.js)詳細介紹
這篇文章主要介紹了微信小程序視圖層（xx.xml)和邏輯層(xx.js)詳細介紹的相關(guān)資料,需要的朋友可以參考下
2016-10-10
微信小程序 flex實現(xiàn)導航實例詳解
這篇文章主要介紹了微信小程序 flex實現(xiàn)導航實例詳解的相關(guān)資料,需要的朋友可以參考下
2017-04-04
微信小程序?qū)崿F(xiàn)給循環(huán)列表添加點擊樣式實例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)給循環(huán)列表添加點擊樣式實例的相關(guān)資料,需要的朋友可以參考下
2017-04-04
使用JavaScript破解web
今天小編就為大家分享一篇關(guān)于使用JavaScript破解web的文章，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2018-09-09
three.js-結(jié)合dat.gui實現(xiàn)界面可視化修改及調(diào)試詳解
這篇文章主要為大家介紹了three.js-結(jié)合dat.gui實現(xiàn)界面可視化修改及調(diào)試詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
微信小程序省市區(qū)選擇器實例詳解(附源碼下載)
這篇文章主要介紹了微信小程序省市區(qū)選擇器實例詳解的相關(guān)資料,區(qū)域間手勢滑動切換，標題欄高亮隨之切換，反之亦然；當前選中標題紅色高亮；回到前一級點擊某區(qū)域后，清空子代的區(qū)域，需要的朋友可以參考下
2017-01-01
javascript Number 與 Math對象的介紹
這篇文章主要介紹了javascript Number 與 Math對象，文章圍繞 Number 與 Math對象的相關(guān)資料展開內(nèi)容,需要的朋友可以參考一下，希望對你有所幫助
2021-11-11
微信小程序表單Form實例詳解（附源碼）
這篇文章主要介紹了微信小程序表單Form實例詳解的相關(guān)資料,這里對form 表單進行了詳細介紹，并附實例代碼，需要的朋友可以參考下
2016-12-12
微信小程序向左滑動刪除功能的實現(xiàn)
這篇文章主要介紹了微信小程序向左滑動刪除功能的實現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2017-03-03