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 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
sunbyte6 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
普宁彭于晏9 小时前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
你喜欢喝可乐吗?14 小时前
RuoYi-Cloud 验证码处理流程
java·spring cloud·微服务·vue
魂兮归乡16 小时前
B2、进度汇报(— 25/06/16)
经验分享·spring boot·ai·vue·团队开发·课程设计·web app
灰海18 小时前
封装WebSocket
前端·网络·websocket·网络协议·vue
布兰妮甜1 天前
开发在线商店:基于Vue2+ElementUI的电商平台前端实践
前端·javascript·elementui·vue
大菠萝学姐2 天前
基于Spring Boot和Vue的高校图书馆座位预约系统的设计与实现
java·vue.js·spring boot·后端·python·mysql·vue
黄焖鸡能干四碗2 天前
系统安全设计方案,软件系统安全设计方案
开发语言·数据库·安全·vue·系统安全
知识分享小能手2 天前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3