制作如图所示新闻页面（newspage)之导航栏步骤如下：
（1）在newspage.js中定义数据（数据都放在.js中的data内）
data: {
newsTitles:['要闻','国际','国内','娱乐','体育','科技','视频']
}
（2）在newspage.wxml中定义显示（视图层）
<view class="nav">
<view hover="true" hover-class="hoverNav" hover-stay-time="1000" class="nav_title">
<text wx:for="{{newsTitles}}" data-idx="{{index}}" class="item" wx:key="unique"
bindtap="navbarTap">{{item}}</text>
</view>
</view>
view我的理解类似于css中的div，相当于一个容器。
view(开发文档上的解释），包括属性
视图容器。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| hover-class | String | none | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 |
| hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 |
| hover-stay-time | Number | 400 | 手指松开后点击态保留时间，单位毫秒 |
wx:for：
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item，此例中newsTitle是在newspage.js中定义的数组名称，item是默认的数据项。因此通过{{}}双括号将数据绑定出来。
点击导航栏时，可以定义不同的样式，需要hover="true"
（3）在newspage.wxss中定义显示样式（类似于css)
.nav{
display: flex;
justify-content:space-between;
height:50rpx;
background: #EDEFEE;
padding:20rpx;
}
.nav_title{
display: flex;
font-family: "微软雅黑";
font-size:28rpx;
color:#848484;
width:100%;
text-align:"center";
line-height:50rpx;
border-radius:10rpx;
}
.nav_title .item
{
margin-left: 20px;
}
.hoverNav{
color:#476F89;
background:#D4e2ef;
}
（4）定义导航触发事件
在newspage.js中写navbarTap事件处理函数
navbarTap: function (e) {
var that=this;
var currentTab=e.currentTarget.dataset.idx ;
if (currentTab==0)
wx.navigateTo({
url: '/pages/index/index'
})..............//根据不同的currentTab值转向不同的页面；
},
制作完成导航栏