该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表。
#平台差异说明
| 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滑块的颜色indicatorStyle指示器的位置/样式控制
<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>
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>
