導航欄製作

微信小程式不同於H5，製作導航欄不方便，尤其是對於一個初學者來看：以為微信小程式中的Js與H5中的差不多，其實不然，以下就是我在學習微信小程式中製作的小程式導航欄。

頁面程式碼

<view class="nav">
  <view class="{{style[0]}}" data-index="{{0}}" bind:tap="click1">頁面1</view>
  <view class="{{style[1]}}" data-index="{{1}}" bind:tap="click1">頁面2</view>
</view>
<view>
  <view hidden="{{hidden[0]}}">
      1
  </view>
  <view hidden="{{hidden[1]}}">
      2
  </view>
</view>

樣式程式碼

.nav{
  display: flex;
  justify-content: space-around;
}
.now{
  color: aqua;
}

js程式碼

Page({

  /**
   * 頁面的初始資料
   */
  data: {
      style:['now',''],
      hidden:[false,true]
  },

  click1(env) {
      let index=env.target.dataset.index;
      let style=this.data.style;
      let hidden =this.data.hidden;

      for(let i=0;i<style.length;i++){
        if(i==index){
          style[i]="now";
          hidden[i]=false;
        }else{
          style[i]="";
          hidden[i]=true;
        }
      }
      this.setData({
        style,
        hidden
      })
  },
  

效果圖