uView2.0 ScrollList 多菜单扩展

ScrollList 多菜单扩展

使用uni/vue2

 // HTML
<u-scroll-list>
    <view class="scroll-list margin-top-xs">
      <!-- 第一行 -->
      <view class="scroll-list__row">
        <view
          class="scroll-list__goods-item"
		  style="width: 248rpx;height:120rpx;display:flex;justify-content: center;align-items:center"
          v-for="(item, index) in list.slice(0, 6)" 
          :key="'row1-' + index"
          :class="[(index === 4) && 'scroll-list__goods-item--no-margin-right']"
        >
		<text>{{item.name}}</text>
		<text class="margin-top-sm text-bold" style="color:#ff6347">￥{{ item.price }}</text>
        </view>
      </view>
      <!-- 第二行 -->
      <view class="scroll-list__row">
        <view
          class="scroll-list__goods-item"
		  style="width: 248rpx;height:120rpx;display:flex;justify-content: center;align-items:center"
          v-for="(item, index) in list.slice(6, 12)" 
          :key="'row2-' + index"
          :class="[(index === 4) && 'scroll-list__goods-item--no-margin-right']"
        >
		<text>{{item.name}}</text>
		<text class="margin-top-sm text-bold" style="color:#ff6347">￥{{ item.price }}</text>
        </view>
      </view>
    </view>
  </u-scroll-list>

// JS
data() {
			return {
				list: [
					{name: '全部销售额',price: 11.90},
					{name: '全部单数', price: 11.90},
					{name: '预估佣金', price: 11.90},
					{name: '退款销售额', price: 11.90},
					{name: '退款订单',price: 11.90},
					{name: '退款服务费',price: 11.90},
					{name: '有效销售额',price: 11.90},
					{name: '有效单数',price: 11.90},
					{name: '有效佣金',price: 11.90},
					{name: '已结算销售额',price: 11.90},
					{name: '已结算订单',price: 11.90},
					{name: '已结算服务费',price: 11.90},
				],
			}
		}

// css
<style lang="scss">
  .scroll-list {
	display: flex;
	flex-direction: column;
      .scroll-list__row {
        display: flex;
        flex-direction: row;
        margin-top:5rpx;
     }
     .scroll-list__goods-item {
       display: flex;
       flex-direction: column;
       align-items: center;
    }
}

<style>

如果下面的指示器跟上面的滑动不同步的情况下用下面的代码

<template>
  <u-scroll-list @scroll="handleScroll">
    <view class="scroll-list margin-top-xs" ref="scrollList">
      <!-- 第一行 -->
      <view class="scroll-list__row">
        <view
          class="scroll-list__goods-item"
          style="width: 248rpx;height:120rpx;display:flex;justify-content: center;align-items:center"
          v-for="(item, index) in list.slice(0, 6)" 
          :key="'row1-' + index"
          :class="[(index === 4) && 'scroll-list__goods-item--no-margin-right']"
        >
          <text>{{item.name}}</text>
          <text class="margin-top-sm text-bold" style="color:#ff6347">￥{{ item.price }}</text>
        </view>
      </view>
      <!-- 第二行 -->
      <view class="scroll-list__row">
        <view
          class="scroll-list__goods-item"
          style="width: 248rpx;height:120rpx;display:flex;justify-content: center;align-items:center"
          v-for="(item, index) in list.slice(6, 12)" 
          :key="'row2-' + index"
          :class="[(index === 4) && 'scroll-list__goods-item--no-margin-right']"
        >
          <text>{{item.name}}</text>
          <text class="margin-top-sm text-bold" style="color:#ff6347">￥{{ item.price }}</text>
        </view>
      </view>
    </view>
    <div class="indicator-container">
      <div class="indicator" :style="{ width: indicatorWidth + '%' }"></div>
    </div>
  </u-scroll-list>
</template>

<script>
export default {
  data() {
    return {
    	list: [
			{name: '全部销售额',price: 11.90},
			{name: '全部单数', price: 11.90},
			{name: '预估佣金', price: 11.90},
			{name: '退款销售额', price: 11.90},
			{name: '退款订单',price: 11.90},
			{name: '退款服务费',price: 11.90},
			{name: '有效销售额',price: 11.90},
			{name: '有效单数',price: 11.90},
			{name: '有效佣金',price: 11.90},
			{name: '已结算销售额',price: 11.90},
			{name: '已结算订单',price: 11.90},
			{name: '已结算服务费',price: 11.90},
		],
      indicatorWidth: 0,
      totalScrollableWidth: 0,
    };
  },
  mounted() {
    this.calculateScrollableWidth();
    uni.onWindowResize(this.calculateScrollableWidth);
  },
  beforeDestroy() {
    uni.offWindowResize(this.calculateScrollableWidth);
  },
  methods: {
    calculateScrollableWidth() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('.scroll-list').boundingClientRect((data) => {
          if (data) {
            this.totalScrollableWidth = data.scrollWidth - data.width;
          }
        }).exec();
      });
    },
    handleScroll(event) {
      const scrollLeft = event.detail.scrollLeft;
      if (this.totalScrollableWidth > 0) {
        this.indicatorWidth = (scrollLeft / this.totalScrollableWidth) * 100;
      } else {
        this.indicatorWidth = 0;
      }
    },
  },
};
</script>

<style>
.scroll-list {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.scroll-list__row {
  display: flex;
  flex-direction: row;
  margin-top: 5rpx;
}

.scroll-list__goods-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.indicator-container {
  position: relative;
  height: 4px;
  background-color: #e0e0e0;
  margin-top: 10px;
}

.indicator {
  position: absolute;
  height: 100%;
  background-color: #ff6347;
  transition: width 0.3s;
}
</style>