该组件一般用于同时展示多个商品、分类的场景,也可以完成左右滑动的列表。
#平台差异说明
App(vue) | App(nvue) | H5 | 小程序 |
---|---|---|---|
√ | √ | √ | √ |
#基本使用
通过slot传入内容
<template>
<u-scroll-list>
<view v-for="(item, index) in list" :key="index">
<image :src="item.thumb"></image>
</view>
</u-scroll-list>
</template>
<script>
export default {
data() {
return {
list: [{
thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
}, {
thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
}, {
thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
}, {
thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
}, {
thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
}]
}
}
}
</script>
copy
#指示器的使用
-
indicator
用于控制指示器是否显示 -
indicatorWidth
用于控制指示器整体的宽度 -
indicatorBarWidth
用于控制指示器滑块的宽度 -
indicatorColor
指示器的颜色 -
indicatorActiveColor
滑块的颜色 -
<template> <u-scroll-list :indicator="indicator" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c"> <view v-for="(item, index) in list" :key="index"> <image :src="item.thumb"></image> </view> </u-scroll-list> </template> <script> export default { data() { return { indicator: true, list: [{ thumb: "https://cdn.uviewui.com/uview/goods/1.jpg" }, { thumb: "https://cdn.uviewui.com/uview/goods/2.jpg" }, { thumb: "https://cdn.uviewui.com/uview/goods/3.jpg" }, { thumb: "https://cdn.uviewui.com/uview/goods/4.jpg" }, { thumb: "https://cdn.uviewui.com/uview/goods/5.jpg" }] } } } </script>indicatorStyle
指示器的位置/样式控制
copy
#兼容性与性能
- 此组件是在nvue中引入bindingx,此库类似于微信小程序wxs,目的是让js运行在视图层,减少视图层和逻辑层的通信折损,在nvue中会有更好的体验。
- 此组件是在APP-VUE、H5、小程序中使用的是wxs。
- 其他平台则使用js完成。
当滑动到最左边/最右边时,uView提供了事件left
和right
可供调用,用于对列表滑动到端点处的业务实现。
<template>
<u-scroll-list @right="right" @left="left">
<view class="scroll-list" style="flex-direction: row;">
<view
class="scroll-list__goods-item"
v-for="(item, index) in list"
:key="index"
:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
>
<image class="scroll-list__goods-item__image" :src="item.thumb"></image>
<text class="scroll-list__goods-item__text">¥{{ item.price }}</text>
</view>
<view class="scroll-list__show-more">
<text class="scroll-list__show-more__text">查看更多</text>
<u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
</view>
</view>
</u-scroll-list>
</template>
<script>
export default {
data() {
return {
list: [{
price: '230.5',
thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
}, {
price: '74.1',
thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
}, {
price: '8457',
thumb: 'https://cdn.uviewui.com/uview/goods/6.jpg'
}, {
price: '1442',
thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg'
}, {
price: '541',
thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
}, {
price: '234',
thumb: 'https://cdn.uviewui.com/uview/goods/3.jpg'
}, {
price: '562',
thumb: 'https://cdn.uviewui.com/uview/goods/4.jpg'
}, {
price: '251.5',
thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
}]
}
},
methods: {
left() {
console.log('left');
},
right() {
console.log('right');
}
}
}
</script>
<style lang="scss">
.scroll-list {
@include flex(column);
&__goods-item {
margin-right: 20px;
&__image {
width: 60px;
height: 60px;
border-radius: 4px;
}
&__text {
color: #f56c6c;
text-align: center;
font-size: 12px;
margin-top: 5px;
}
}
&__show-more {
background-color: #fff0f0;
border-radius: 3px;
padding: 3px 6px;
@include flex(column);
align-items: center;
&__text {
font-size: 12px;
width: 12px;
color: #f56c6c;
line-height: 16px;
}
}
}
</style>