vue 自己写个横向滚动列表吧

唯心所现，唯识所变

已于 2024-04-07 11:41:13 修改

阅读量3.6k

点赞数 4

文章标签： vue.js 前端 javascript

于 2023-05-30 11:26:06 首次发布

未经允许不得转载

本文链接：https://blog.csdn.net/qq_46566911/article/details/130944417

版权

文章展示了如何在Vue.js应用中手写一个横向滚动列表，因为uview的内置组件无法满足特定的业务和样式需求。代码示例包括HTML结构、JavaScript数据处理和CSS样式，特别关注了滚动事件的处理和自定义滚动条样式。

摘要由CSDN通过智能技术生成

手动写个横向滚动列表吧，其实在uview中也有该组件，但是不支持具体的业务需要和样式需求，因此决定自己手写一个了

在这里插入图片描述
直接上代码吧，对你有用的话请点个赞哦

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>

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;
            }
          }