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