微信小程序----实现横向滑动列表

微信小程序----实现横向滑动列表

在项目中用了几次，觉得有用，希望对大家也有帮助。直接看代码吧：

一、xml代码

<template>
  <view class="index_tab">
    <scroll-view
      class="bottom_scroll"
      scroll-x="true"
      scroll-left="{{x}}"
      scroll-with-animation="{{true}}"
    >
      <view class="nav" wx:for="{{nav_list}}" wx:key="item" data-type="item">
        <view
          class="month {{ currentTab==index?'active':'' }}"
          bindtap="swichNav"
          data-index="{{index}}"
          data-mon="{{item}}"
        >{{item}}月</view>
      </view>
    </scroll-view>
  </view>
</template>

二、css代码

// 横向滚动
.index_tab .bottom_scroll {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  line-height: 40rpx;
}
.index_tab .bottom_scroll .nav {
  width: 16.6%;
  display: inline-block;
  white-space: normal;
  text-align: center;
  font-size: 26rpx;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
.nav {
  padding: 10rpx 0;
}
.month {
  height: 40rpx;
  font-size: 32rpx;
  color: #333333;
  border-right: 1px solid #797979;
}
.month.active {
  color: #0066cf;
}

注：因为在手机上看的话会有横向滚动条，下面这个css代码能去掉横向滚动条

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

三、js代码

data:

  data: {
    nav_list: ['12', '11', '10', '9', '8', '7', '6', '5', '4', '3', '2', '1'],
    currentTab: '' //当前选中的月份下标从0开始
  },

js

    //点击月
    async swichNav(e) {
      var current = e.target.dataset.index
      if (this.data.currentTab != current) {
        this.setData({ currentTab: current })
      }
      // 点击的月份
      var mon = 12 - current
      if (mon < 10) {
        mon = '0' + mon
      }
      console.log('当前月份：' + mon)
    }

四、结果