【微信小程序】新闻频道效果(75/100）

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) {

  },

## SmartApi开发工具
全新版本
极小，极快，极限性能的开发调试工具

官网地址：[http://www.smartapi.site/](http://www.smartapi.site/)

 

## 旧版本不在维护更新