wxml

<scroll-view scroll-x="true" class="ip_tab_comtainer">

  <view class="ip_tab_comtainer_padd"></view>

  <block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}">

    <view class="{{ip.isSelect?'ip_tab_item_s':'ip_tab_item_n'}}" bindtap="onIpItemClick" wx:key="{{ip.id}}" data-item="{{ip}}">

      {{ip.title}}

    </view>

  </block>

  <view class="ip_tab_comtainer_padd"></view>

</scroll-view>

<view class='content'>

{{content}}

</view>

wxss

.ip_tab_comtainer {

    width: 100%;

    background-color: #F5F5F5;

    padding: 20rpx 0 0;

    white-space: nowrap;

}

.ip_tab_comtainer_padd {

    display: inline-block;

    width: 24rpx;

}

.ip_tab_item_s {

    display: inline-block;

    line-height: 40rpx;

    padding: 12rpx 32rpx;

    color: #91daf9;

    margin-right: 8rpx;

    margin-left: 8rpx;

    font-size: 28rpx;

    overflow: hidden;

    background-color: #ffffff;

    border: 1px solid #91daf9;

}

.ip_tab_item_n {

    display: inline-block;

    padding: 12rpx 32rpx;

    line-height: 40rpx;

    color: #353535;

    margin-right: 8rpx;

    background-color: #ffffff;

    margin-left: 8rpx;

    font-size: 28rpx;

    text-align: center;

    overflow: hidden;

    text-overflow: ellipsis;

    border-radius: 4rpx;

    border: 1px solid #CCCCCC;

}

/**

去除横向滚动条

*/

::-webkit-scrollbar {

    width: 0;

    height: 0;

    color: transparent;

}

.content{

  width: 100%;

}

js

// pages/horizontal-scroll_tab/horizontal-scroll_tab.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

    ips: [

      { id: "1", title: "日统计", isSelect:true },

      { id: "2", title: "月统计", isSelect: false},

      { id: "3", title: "年统计", isSelect: false},

    ],

    content:"全部"

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

  },

  /**

    * item点击事件

    */

  onIpItemClick: function (event) {

    console.log(event);

    var id = event.currentTarget.dataset.item.id;

    var curIndex = 0;

    for (var i = 0; i < this.data.ips.length; i++) {

      if (id == this.data.ips[i].id) {

        this.data.ips[i].isSelect = true;

        curIndex = i;

      } else {

        this.data.ips[i].isSelect = false;

      }

    }

    this.setData({

      content: this.data.ips[curIndex].title,

      ips: this.data.ips,

    });

  },

})