wxml：
<!--pages/channelMore/channelMore.wxml-->
<scroll-view class="scroll-view_H" scroll-x="true">
<view class="scroll-view_H">
<view>
<view class="{{flag==0?'select':'normal'}}" id="0" bindtap="switchNav">推荐</view>
</view>
<view>
<view class="{{flag==1?'select':'normal'}}" id="1" bindtap="switchNav">热点</view>
</view>
<view>
<view class="{{flag==2?'select':'normal'}}" id="2" bindtap="switchNav">北京</view>
</view>
<view>
<view class="{{flag==3?'select':'normal'}}" id="3" bindtap="switchNav">社会</view>
</view>
<view>
<view class="{{flag==4?'select':'normal'}}" id="4" bindtap="switchNav">娱乐</view>
</view>
<view>
<view class="{{flag==5?'select':'normal'}}" id="5" bindtap="switchNav">问答</view>
</view>
<view>
<view class="{{flag==6?'select':'normal'}}" id="6" bindtap="switchNav">图片</view>
</view>
<view>
<view class="{{flag==6?'select':'normal'}}" id="6" bindtap="switchNav">科技</view>
</view>
<view>
<view class="{{flag==6?'select':'normal'}}" id="6" bindtap="switchNav">汽车</view>
</view>
<view>
<view class="{{flag==6?'select':'normal'}}" id="6" bindtap="switchNav">体育</view>
</view>
</view>
</scroll-view>
<include src="../command/footer.wxml"/>
demo搞搞效果，没用动态数据。正式项目开发一般是一个循环数组解决
wxss：
/* pages/channelMore/channelMore.wxss */
.scroll-view_H{
height: 40px;
flex-direction: row;
display: flex;
margin-left: 5px;
}
.normal{
width: 40px;
height: 40px;
line-height: 40px;
padding-left: 5px;
padding-right: 5px;
font-size: 14px;
}
.select{
width: 40px;
height: 40px;
line-height: 40px;
padding-left: 5px;
padding-right: 5px;
font-size: 14px;
font-weight: bold;
}
数据模型：
// pages/channelMore/channelMore.js
Page({
/**
* 页面的初始数据
*/
data: {
flag:0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
好用的Api工具推荐
历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线 smartApi是一款对标国外的postman的api调试开发工具，由于开发人力就作者一个所以人力有限，因此v1.0.0版本功能进行精简，大功能项有：
- api参数填写
- api请求响应数据展示
- PDF形式的分享文档
- Mock本地化解决方案
- api列表数据本地化处理
- 再加上UI方面的打磨
本地运行，性能优越，高效，快捷
下面是一段smartApi使用介绍：
