【微信小程序】分類標籤欄滾動定位

效果圖：

原理：

圖片來源

使用scroll-view實現, 記錄一下，之後遇到相似功能能夠直接拿來用

wxml

<view class="classify-wrapper">
  <view class="classify-section">
    <scroll-view scroll-x="true" scroll-left="{{scrollLeft}}" scroll-with-animation="true" class="scroll-view">
      <view class="classify-list" wx:for="{{classify}}"  wx:key="unique" data-index="{{index}}" bindtap="toCategory">
          <view class="{{index === classifyActiveIndex? 'active' : ''}}">{{item.name || item}}</view>
          <view class="{{index === classifyActiveIndex? 'rect' : ''}}"></view>
      </view>
    </scroll-view>

    <view class="icon_arrdown" bindtap="transClassifyModal">
      <image src="/resources/images/icon_arrdown.png"></image>
    </view>
  </view>
  
  <!-- 所有分類 -->
  <view class="classifyModal" wx:if="{{classifyModalShow}}" wx:key="{{index}}">
    <view class="mask" bindtap="transClassifyModal"></view>
    <view class="classifyModal-wrapper">
      <view class="title">
        <text>所有類目</text>
        <image class="bottom" bindtap="transClassifyModal" src="/resources/images/icon_arrup.png"></image>
      </view>
      <view class="classify-list">
        <view class="classify-item" wx:for="{{classify}}" wx:key="{{index}}">
          <view data-index="{{index}}" bindtap="clickClassify" class="{{classifyActiveIndex === index ?'info active': 'info'}}">{{item.name||item}}</view>
        </view>
      </view>
    </view>
  </view>
  
</view>
複製代碼

js

// pages/classify-bar/classify-bar.js
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    classifyModalShow: false,
    scrollLeft: 0,
    classifyActiveIndex: 0,
    BAR_WIDTH: 68,
    classify: [
      { name: '分類1' },
      { name: '分類2' },
      { name: '分類3' },
      { name: '分類4' },
      { name: '分類5' },
      { name: '分類6' },
      { name: '分類7' },
      { name: '分類8' },
      { name: '分類9' },
      { name: '分類10' },
      { name: '分類11' },
      { name: '分類12' }
    ]
  },
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
  },
  toCategory(e) {
    let index = e.currentTarget.dataset.index;
    this.setSlider(index);
  },
  transClassifyModal() {
    this.setData({
      classifyModalShow: !this.data.classifyModalShow
    })
  },
  clickClassify(e) {
    let index = e.currentTarget.dataset.index;
    this.setSlider(index);
    this.transClassifyModal();
    console.log('索引：' + index,  ' 標籤名：' + this.data.classify[index].name)
  },
  setSlider(index) {
    this.scrollLeft = (index - 1) * this.data.BAR_WIDTH;
    this.setData({
      scrollLeft: (index - 1) * this.data.BAR_WIDTH,
      classifyActiveIndex: index
    })
  }
})
複製代碼

wxss

.classify-wrapper{
    width: 100%;
}
/* 分類 */
.indexPadding{
  padding: 25rpx 20rpx 118rpx 20rpx;
}
.categoryPadding{
  padding: 40rpx 24rpx 30rpx 24rpx;
}
.classify-section{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    box-sizing: border-box;
    background-color: #000;
    color: rgb(153, 153, 153);
    position: relative;
    white-space: nowrap;
}
.scroll-view{
  height: 62rpx;
}
.classify-section .classify-list{
  display: inline-block;
  overflow-x: scroll;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 136rpx;
  height: 100%;
  min-width: 136rpx;
  text-align: center;
  box-sizing: border-box;
  padding-top: 10rpx;
}
.classify-list .rect{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80rpx;
  height: 5rpx;
  background-color: #ffcc58;
}
.active{
    color: #ffcc58;
    display: inline-block;
}
.icon_arrdown{
    margin-left: 20rpx;
    width: 75rpx;
    height: 60rpx;
    position: absolute;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.icon_arrdown image{
    width: 18rpx;
    height: 12rpx;
    display: block;
    margin-right: 30rpx;
}

/* 所有分類框 */
.classifyModal{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}
.classifyModal .mask{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
.classifyModal-wrapper{
    position: absolute;
    top: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 0 0 15rpx 15rpx;
}
.classifyModal-wrapper .title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    font-size: 34rpx;
    color: #666666;
    border-bottom: 1rpx solid #eee;
}
.classifyModal-wrapper .title image{
  width: 18rpx;
  height: 12rpx;
  display: block;
}
.classifyModal-wrapper .title .bottom{
  width: 26rpx;
  height: 16rpx;
  display: block;
}
.classifyModal-wrapper .classify-list{
    width: 100%;
    display: flex;
    flex-flow:row wrap;
    padding: 30rpx 30rpx 0 30rpx;
    box-sizing: border-box;
}
.classifyModal-wrapper .classify-list .classify-item{
    width: 25%;
    padding-right: 30rpx;
    margin-bottom: 30rpx;
    text-align: center;
    box-sizing: border-box;
}
.classifyModal-wrapper .classify-list .classify-item:nth-of-type(4n){
    padding-right: 0;
}
.classifyModal-wrapper .classify-list .classify-item .info{
  background-color: #eeeeee;
  border-radius: 45rpx;
  font-size: 26rpx;
  color: #666666;
  padding: 10rpx 0;
  width: 100%;
  box-sizing: border-box;
}
.classifyModal-wrapper .classify-list .classify-item .active{
  background: linear-gradient(to bottom right, #ffcc58 , #ffa200)!important;
  color: #000000;
}
複製代碼