uView2.0 ScrollList 多菜单扩展

ScrollList 多菜单扩展

使用uni/vue2

html 复制代码
 // 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>
javascript 复制代码
// 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 复制代码
// 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>

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

javascript 复制代码
<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>
相关推荐
百锦再1 天前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
飞翔的佩奇2 天前
Java项目:基于SSM框架实现的忘忧小区物业管理系统【ssm+B/S架构+源码+数据库+毕业论文+开题报告】
java·数据库·mysql·vue·毕业设计·ssm框架·小区物业管理系统
百锦再3 天前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code4 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*16884 天前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员4 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_4 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte4 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
nbsaas-boot4 天前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++
skyymrj14 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue