小程序顶部滚动导航

话不多说，先看效果

amS8eXn0Ec.gif

涉及的知识点：
1、scroll-view的使用scroll-x="true",设置水平滚动；
2、小程序动态绑定class，切换active状态class="{{flag==index?'active':''}}"跟vue动态绑定class有区别，需要用{{...}}包围；vue动态绑定class参考https://www.jianshu.com/p/45dbac5035e2；
3、在css设置white-space: nowrap;之后，子元素就可以在一排了；
4、在标签存储datadata-flagindex='{{index}},点击事件中取出datae.currentTarget.dataset.flagindex；

<!-- 顶部导航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}}">
    当前flag=0，新闻
  </view>
  <view class='jokes-wrap' hidden="{{flag == 1?false:true}}">
    当前flag=1，开心一笑
  </view>
  <view class='weather-wrap' hidden="{{flag == 2?false:true}}">
    当前flag=2，天气
  </view>
  <view class='periphery-wrap' hidden="{{flag == 3?false:true}}">
    当前flag=3，周边
  </view>
  <view class='calendar-wrap' hidden="{{flag == 4?false:true}}">
    当前flag=4，黄历查询
  </view>
  <view class='image-wrap' hidden="{{flag == 5?false:true}}">
    当前flag=5，图片笑话
  </view>
  <view class='more-wrap' hidden="{{flag == 6?false:true}}">
    当前flag=6，更多
  </view>
<view>

// pages/home/home.js
Page({
  data: {
    category: [{ "name": "新闻" }, { "name": "开心一笑" }, { "name": "天气" }, { "name": "周边" }, { "name": "黄历查询" }, { "name": "图片笑话" }, { "name": "更多" }],
// 切换class样式标志
    flag:0
  },
//点击切换显示内容
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);
}