小程序之Tab切換

小程序越來越火了，作為一名，額  有理想的攻城獅，當然要緊跟互聯網時代的步伐啦，於是我趕緊抽時間學習了一下小程序的開發，順便把經驗分享給大家。

對於申請賬號以及安裝開發工具等，大家可以看官網：https://mp.weixin.qq.com/debug/wxadoc/dev/。

●先上成果

 

.wxml代碼：

 　<view class='container'>
    <!-- 底部導航 -->
    <view class='bottom-nav'>
      <view class='tab-list'>
        <view class="nav-list {{sign == 1?'add-tabing':'add-tab'}}" data-num = "1" bindtap='clickNav'>首頁</view>
        <view class="nav-list {{sign == 2?'add-tabing':'add-tab'}}" data-num = "2" bindtap='clickNav'>地圖</view>
        <view class="nav-list {{sign == 3?'add-tabing':'add-tab'}}" data-num = "3" bindtap='clickNav'>個人中心</view>
      </view>
    </view>

    <view>
      <!-- 首頁 -->
      <view class="cont-detail {{sign == 1?'tab-show':'tab-hide'}}" data-num = "1">
          當前首頁頁面待開發
      </view>

      <!-- 地圖 -->
      <view class="cont-detail {{sign == 2?'tab-show':'tab-hide'}}" data-num = "2">
        當前地圖頁面待開發
      </view>

      <!-- 個人中心 -->
      <view class="cont-detail {{sign == 3?'tab-show':'tab-hide'}}" data-num = "3">
        當前個人中心頁面待開發
      </view>
    </view>
</view>

.js代碼：

Page({
  data: {
    sign: 1,
    
  },
  clickNav: function (e) {
    //console.log(e)  有想深入了解e代表什么的話，可以打印出來看看
    this.setData({
      sign: e.target.dataset.num
    })
  },
  
})

.wxss代碼：

.container .bottom-nav{width: 100%;height: 50px;line-height: 50px; position: absolute; bottom: 0;left: 0;background: #fff;}
.container .tab-list{display: flex;font-size: 16px;}
.container .tab-list .nav-list{flex: 1;text-align: center}
.container .tab-list .add-tabing{color: #ff9900;}
.container .tab-list .add-tab{color: #000;}
.cont-detail{width: 100%;height: 100%;}  
.tab-show{display: block;}
.tab-hide{display: none;}
.cont-detail{width: 100%;margin-top: 300rpx;text-align: center}