小程序横向滚动(方块)

  <view class='tab'>
    <scroll-view scroll-x>
      <view class='tab_list {{item.id==id?"checked":""}}' wx:for='{{list}}' wx:key='index' data-id='{{item.id}}' bindtap='tabClick'>
        <view>{{item.title}}</view>
      </view>
    </scroll-view>
  </view>


.tab {
  white-space: nowrap;
  overflow: hidden;
}

.tab_list {
  width: 150rpx;
  height: 55rpx;
  text-align: center;
  line-height: 55rpx;
  border: 1rpx solid #d9d9d9;
  font-size: 25rpx;
  display: inline-block;
}

.checked {
  background-color: #69b74a;
  color: white;
}




const app = getApp();
Page({
  data: {
    id: 1,
    index: '',
    list: [{
        id: 1,
        title: '客户转店1'
      },
      {
        id: 2,
        title: '客户转店2'
      },
      {
        id: 3,
        title: '客户转店3'
      },
      {
        id: 4,
        title: '客户转店4'
      },
      {
        id: 5,
        title: '客户转店5'
      },
      {
        id: 6,
        title: '客户转店6'
      },
    ]
  },
  onLoad() {},
  tabClick(e) {
    let ids = e.currentTarget.dataset.id
    this.setData({
      id: ids,
      index: ids
    })
    console.log(e)
  }
})