話不多說，先看效果

amS8eXn0Ec.gif

涉及的知識點(diǎn)：
1、scroll-view的使用scroll-x="true",設(shè)置水平滾動；
2、小程序動態(tài)綁定class，切換active狀態(tài)class="{{flag==index?'active':''}}"跟vue動態(tài)綁定class有區(qū)別，需要用{{...}}包圍；vue動態(tài)綁定class參考http://www.itdecent.cn/p/45dbac5035e2；
3、在css設(shè)置white-space: nowrap;之后，子元素就可以在一排了；
4、在標(biāo)簽存儲datadata-flagindex='{{index}},點(diǎn)擊事件中取出datae.currentTarget.dataset.flagindex；

<!-- 頂部導(dǎo)航wxml -->
<view class="home">
  <view class='totle-nav'>
    <scroll-view class='scroll-wrap' scroll-x="true" style='width:100%;'>
      <text class="{{flag==index?'active':''}}" bindtap="flagFun" wx:for="{{category}}" wx:key="index" data-flagindex='{{index}}'>{{item.name}}</text>
    </scroll-view>
  </view>
  <view class='news-wrap' hidden="{{flag == 0?false:true}}">
    當(dāng)前flag=0，新聞
  </view>
  <view class='jokes-wrap' hidden="{{flag == 1?false:true}}">
    當(dāng)前flag=1，開心一笑
  </view>
  <view class='weather-wrap' hidden="{{flag == 2?false:true}}">
    當(dāng)前flag=2，天氣
  </view>
  <view class='periphery-wrap' hidden="{{flag == 3?false:true}}">
    當(dāng)前flag=3，周邊
  </view>
  <view class='calendar-wrap' hidden="{{flag == 4?false:true}}">
    當(dāng)前flag=4，黃歷查詢
  </view>
  <view class='image-wrap' hidden="{{flag == 5?false:true}}">
    當(dāng)前flag=5，圖片笑話
  </view>
  <view class='more-wrap' hidden="{{flag == 6?false:true}}">
    當(dāng)前flag=6，更多
  </view>
<view>

// pages/home/home.js
Page({
  data: {
    category: [{ "name": "新聞" }, { "name": "開心一笑" }, { "name": "天氣" }, { "name": "周邊" }, { "name": "黃歷查詢" }, { "name": "圖片笑話" }, { "name": "更多" }],
// 切換class樣式標(biāo)志
    flag:0
  },
//點(diǎn)擊切換顯示內(nèi)容
flagFun: function (e) {
    this.setData({
      flag: e.currentTarget.dataset.flagindex
    });
  }
})

/* pages/home/home.wxss */
.home{
  
}
.home .totle-nav{
  margin: 0;
  padding: 0;
}
.home .totle-nav .scroll-wrap{
  white-space: nowrap;
  padding: 0 12px;
  display: inline-block;
  background-color:rgb(7, 64, 102);
  font-size: 32rpx;
  width: 100%;
  box-sizing:border-box;
}
.home .totle-nav .scroll-wrap text{
  display: inline-block;
  padding: 10px 0 4px 0;
  margin: 0 18px;
  color: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
}
.home .totle-nav .scroll-wrap text.active{
  border-bottom:3px solid rgba(255, 255, 255, 0.7);
  color: rgba(255, 255, 255, 1);
}