Vue horizontal sliding + scroll bar <horizontal scrolling list>

Manually write a horizontal scrolling list,

just upload the code directly, please like it if it is useful to you

html

 <!-- 渲染的tab栏，需要加个scroll-view，使其横向滚动 -->
        <view class="tab-box">
          <scroll-view scroll-x="true" class="tab" @scroll="scrollEvent" @touchmove.stop>
            <view class="scroll-tab" v-for="(item, index) in tab" :key="index">
              <view class="content" :style="{ width: `${
      
      screenWidth}px` }">
                <view class="img-box">
                  <img class="img" :src="$imgUrl(item.url)" alt="" />
                </view>
                <view class="text">{
    
    {
    
     item.title }}</view>
              </view>
            </view>
          </scroll-view>
          <!-- 滚动条 -->
          <!-- <view class="scroll">
                  <view class="scroll-box">
                    <view
                      class="action"
                      :style="{ marginLeft: scrollPercent }"
                    ></view>
                  </view>
                </view> -->
        </view>

js

data() {
    
    
	 return {
    
    
 		scrollPercent: '',
		screenWidth: '100%',
 	}
}

  mounted() {
    
    
    let _this = this
    uni.getSystemInfo({
    
    
      success: function (res) {
    
    
      // 30是你的内外边距 5是你在当前页面要放几个
        _this.screenWidth = (res.windowWidth - 30) / 5
      },
    })
  },


scrollEvent(e) {
    
    
      let offsetWidth
      uni.getSystemInfo({
    
    
        success: function (res) {
    
    
          offsetWidth = res.windowWidth
        },
      })
      // 滚动长度百分比
      let scrollLeft = Math.floor(
        (e.detail.scrollLeft * 100) / (e.detail.scrollWidth - offsetWidth)
      )
      // （里面滑块长度/滚动条总长度）*滚动长度百分比
      let scrollNum = (((this.scrollIndexWidth * 100) / this.scrollWidth) * scrollLeft) / 10000
      scrollNum < 0 ? (scrollNum = 0) : (scrollNum = scrollNum)
      scrollNum > 0.5 ? (scrollNum = 0.5) : (scrollNum = scrollNum)
      this.scrollPercent = toPercent(scrollNum)
    },

css

      // tab栏
      .tab-box {
    
    
        margin: 40rpx 30rpx;

        .tab {
    
    
          white-space: nowrap;
          margin-bottom: 32rpx;
          margin-top: -20rpx;
          overflow-y: hidden;

          .scroll-tab {
    
    
            display: inline-block;
          }

          .content {
    
    
            text-align: center;
          }

          .img-box {
    
    
            text-align: center;

            .img {
    
    
              text-align: center;
              width: 64rpx;
              height: 64rpx;
            }
          }

          .text {
    
    
            font-size: 22rpx;
            color: #4b4d50;
            opacity: 0.7;
            margin-top: 6rpx;
            white-space: nowrap;
          }
        }

        .tab::-webkit-scrollbar {
    
    
          width: 0;
        }

        .tab::-webkit-scrollbar {
    
    
          display: none !important;
          width: 0px;
          height: 0px;
        }

        // 滚动条
        .scroll {
    
    
          display: flex;
          justify-content: center;

          .scroll-box {
    
    
            border-radius: 2rpx;
            background-color: #d8d8d8;
            height: 4rpx;
            width: 40rpx;

            .action {
    
    
              border-radius: 2rpx;
              background-color: $themeColor;
              height: 4rpx;
              width: 20rpx;
            }
          }