导航栏制作

微信小程序不同于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})},

效果图