微信小程序（5）-新闻页面制作（1）

制作如图所示新闻页面（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-classStringnone指定按下去的样式类。当 hover-class="none" 时，没有点击态效果hover-start-timeNumber50按住后多久出现点击态，单位毫秒hover-stay-timeNumber400手指松开后点击态保留时间，单位毫秒

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值转向不同的页面；
  },

制作完成导航栏