ScrollList 横向滚动列表 ¶

该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表。

平台差异说明 ¶

App（vue）	App（nvue）	H5	小程序
√	√	√	√

基本使用 ¶

通过 slot 传入内容

html

<template>
  <up-scroll-list>
    <view v-for="(item, index) in list" :key="index">
      <image :src="item.thumb"></image>
    </view>
  </up-scroll-list>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {
            thumb: "https://xxx.com/goods/1.jpg",
          },
          {
            thumb: "https://xxx.com/goods/2.jpg",
          },
          {
            thumb: "https://xxx.com/goods/3.jpg",
          },
          {
            thumb: "https://xxx.com/goods/4.jpg",
          },
          {
            thumb: "https://xxx.com/goods/5.jpg",
          },
        ],
      };
    },
  };
</script>

指示器的使用 ¶

indicator 用于控制指示器是否显示
indicatorWidth 用于控制指示器整体的宽度
indicatorBarWidth 用于控制指示器滑块的宽度
indicatorColor 指示器的颜色
indicatorActiveColor 滑块的颜色
indicatorStyle 指示器的位置/样式控制

html

<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>
  export default {
    data() {
      return {
        indicator: true,
        list: [
          {
            thumb: "https://xxx.com/goods/1.jpg",
          },
          {
            thumb: "https://xxx.com/goods/2.jpg",
          },
          {
            thumb: "https://xxx.com/goods/3.jpg",
          },
          {
            thumb: "https://xxx.com/goods/4.jpg",
          },
          {
            thumb: "https://xxx.com/goods/5.jpg",
          },
        ],
      };
    },
  };
</script>

兼容性与性能 ¶

此组件是在 nvue 中引入 bindingx，此库类似于微信小程序 wxs，目的是让 js 运行在视图层，减少视图层和逻辑层的通信折损，在 nvue 中会有更好的体验。
此组件是在 APP-VUE、H5、小程序中使用的是 wxs。
其他平台则使用 js 完成。

当滑动到最左边/最右边时，uView 提供了事件left和right可供调用，用于对列表滑动到端点处的业务实现。

html

<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>
  export default {
    data() {
      return {
        list: [
          {
            price: "230.5",
            thumb: "https://xxx.com/goods/1.jpg",
          },
          {
            price: "74.1",
            thumb: "https://xxx.com/goods/2.jpg",
          },
          {
            price: "8457",
            thumb: "https://xxx.com/goods/6.jpg",
          },
          {
            price: "1442",
            thumb: "https://xxx.com/goods/5.jpg",
          },
          {
            price: "541",
            thumb: "https://xxx.com/goods/2.jpg",
          },
          {
            price: "234",
            thumb: "https://xxx.com/goods/3.jpg",
          },
          {
            price: "562",
            thumb: "https://xxx.com/goods/4.jpg",
          },
          {
            price: "251.5",
            thumb: "https://xxx.com/goods/1.jpg",
          },
        ],
      };
    },
    methods: {
      left() {
        console.log("left");
      },
      right() {
        console.log("right");
      },
    },
  };
</script>

<style>
.scroll-list {
  display: flex;
  flex-direction: column;
}

.scroll-list__goods-item {
  margin-right: 20px;
}

.scroll-list__goods-item__image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
}

.scroll-list__goods-item__text {
  color: #f56c6c;
  text-align: center;
  font-size: 12px;
  margin-top: 5px;
}

.scroll-list__show-more {
  background-color: #fff0f0;
  border-radius: 3px;
  padding: 3px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scroll-list__show-more__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	滑动到右边时触发	-