微信小程序--开发横向滚动条scroll-view

一、话不多说，上代码

.wxml文件写法

    <!-- 滚动条 -->
<scroll-view scroll-x="true" scroll-with-animation="true" enable-flex="true" class="scroll-view">
  <view wx:for="{
   
   {dateAndfeeList}}" wx:key="{
   
   {item.date}}" data-currentItem="{
   
   {item}}" data-index="{
   
   {index}}" class="{
   
   {currentTab==index?'scroll_item':''}}" bindtap="swichNav">
    <view class="fee_item">
      <text>{
   
   {item.date}}</text>
      <text>合计:￥{
   
   {item.zfy}}</text>
    </view>
  </view>
</scroll-view>

css样式

.scroll-view {
  width: 100%;
  display: inline-flex;
  height: 80px;
}

.scroll_item {
  color: rgb(43, 183, 226);
}

.fee_item {
  display: flex;
  flex-direction: column;
  min-width: 130px;
  margin-top: 8px;
  margin-bottom: 8px;
  text-align: center;
  border-right: 1.5px solid #adaaaa;
}

js写法

  swichNav(e) {
    var index = e.currentTarget.dataset.index,
    this.setData({
      currentTab: index,
    })
  }

二、解析

 scroll-x="true"：表明是横向滚动

class="{ {currentTab==index?'scroll_item':''}}"：当点击时才会变色，其中currentTab的初始值是0，通过点击事件更改值