uniappС³ÌÐòÒ»¸ö»¬¶¯µÄ¶¥²¿µ¼º½

<template>
 <view class="container">
  <scroll-view 
  class="scroll-container" 
  scroll-x 
  scroll-with-animation 
  v-if="brands.length > 1" 
  :scroll-into-view="'s' + currentIndex">
   <view :class="['scroll-item', { active: index == currentId }]" 
   :id="'s' + index" 
   v-for="(item, index) in brands"
   :key="index" 
   @tap="handleScroll(index)">
   {{ item }}
    <view class="bottom-border" v-if="index == currentId">
     <!-- µ×²¿ºìÉ«¶Ìborder -->
    </view>
   </view>
  </scroll-view>
 </view>
</template>

<script>
 export default {
  data() {
   return {
    currentId:'',/* ¿ØÖƱ»Ñ¡ÖÐ */
    currentIndex:'',/* ¿ØÖÆλÖà */
    brands:[
     'Å£×пã',
     'ÓðÈÞ·þ',
     'ƤЬ',
     'Ô˶¯Ð¬',
     'Åܲ½Ð¬',
     'ÀºÇòЬ',
     'Χ½í',
     'Î÷×°',
     'Î÷¿ã'
    ]
   };
  },

  onLoad() {

  },

  methods: {
   handleScroll(index) {
    this.currentId = index;
    this.currentIndex = Math.max(0, index - 1);
   },
  },
 }
</script>

<style lang="scss" scoped>
.scroll-container {
    box-sizing: border-box;
    padding-left: 20upx;
    white-space: nowrap;
    height: 80upx;
    background: #fff;
    border-bottom: 1upx solid #ccc;
    .scroll-item {
      text-align: center;
      display: inline-block;
      padding: 0 30upx;
      line-height: 70upx;
      font-size: 36upx;
      font-weight: 400;
      color: #1e1e1e;

      &.active {
        display: inline-block;
        font-weight: bold;
        color: #1e1e1e;
        font-size: 42upx;
        // border-bottom: 2px solid #FF4F52;
      }
    }

    .bottom-border {
      margin: 0 auto;
      width: 50upx;
      height: 10upx;
      background: rgba(255, 79, 82, 1);
      border-radius: 5upx;
    }
  }
</style>

´úÂëµØÖ·
https://github.com/bb798sky/selectSku