# ScrollList 横向滚动列表 
该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表。
# 平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
|---|---|---|---|
| √ | √ | √ | √ |
# 基本使用
通过slot传入内容
<template>
<up-scroll-list>
<view v-for="(item, index) in list" :key="index">
<image :src="item.thumb"></image>
</view>
</up-scroll-list>
</template>
<script setup>
import { reactive } from 'vue';
const list = reactive([
{
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>
# 指示器的使用
indicator用于控制指示器是否显示indicatorWidth用于控制指示器整体的宽度indicatorBarWidth用于控制指示器滑块的宽度indicatorColor指示器的颜色indicatorActiveColor滑块的颜色indicatorStyle指示器的位置/样式控制
<template>
<up-scroll-list :indicator="indicator" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
<view v-for="(item, index) in list" :key="index">
<image :src="item.thumb"></image>
</view>
</up-scroll-list>
</template>
<script setup>
import { reactive } from 'vue';
const list = reactive([
{
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>
<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>
# 兼容性与性能
- 此组件是在nvue中引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损，在nvue中会有更好的体验。
- 此组件是在APP-VUE、H5、小程序中使用的是wxs。
- 其他平台则使用js完成。
当滑动到最左边/最右边时，uview-plus提供了事件left和right可供调用，用于对列表滑动到端点处的业务实现。
<template>
<up-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>
<up-icon name="arrow-leftward" color="#f56c6c" size="12"></up-icon>
</view>
</view>
</up-scroll-list>
</template>
<script setup>
import { ref } from 'vue';
// 响应式数据
const list = ref([
{
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: '251.5',
thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
}
]);
// 方法
function left() {
console.log('left');
}
function 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>
# 右侧演示页面源代码地址
github
gitee
# API
# Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| indicatorWidth | 指示器的整体宽度 | String | Number | 50 | - |
| indicatorBarWidth | 滑块的宽度 | String | Number | 20 | - |
| indicator | 是否显示面板指示器 | Boolean | true | false |
| indicatorColor | 指示器非激活颜色 | String | #f2f2f2 | - |
| indicatorActiveColor | 指示器滑块颜色 | String | #3c9cff | - |
| indicatorStyle | 指示器样式，可通过bottom，left，right进行定位 | String | Object | - | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| left | 滑动到左边时触发 | - |
| right | 滑动到右边时触发 | - |