ScrollList 多菜单扩展

使用uni/vue2

 // HTML
<u-scroll-list><view class="scroll-list margin-top-xs"><!-- 第一行 --><view class="scroll-list__row"><viewclass="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"><viewclass="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"><viewclass="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"><viewclass="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>