Fusions

Appearance

ScrollList 横向滚动 ​

iPhone

此组件一般用于同时展示多个商品、分类、数量不确定的场景，并支持左右滑动的列表。

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

通过 slot 传入内容

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

<script setup>
    import { ref } from 'vue';

    // data数据
    const list = ref([
        { image: '' },
        { image: '' },
        { image: '' },
        { image: '' },
        { image: '' },

    ]);
</script>

设置指示器 ​

  • 通过 indicator 属性设置指示器是否显示
  • 通过 indicatorWidth 属性设置指示器整体的宽度
  • 通过 indicatorBarWidth 属性设置指示器滑块的宽度
  • 通过 indicatorColor 属性设置指示器的颜色
  • 通过 indicatorActiveColor 属性设置指示器滑块激活时的颜色
  • 通过 indicatorStyle 属性设置指示器的位置/样式
html
<template>
    <fu-scroll-list
        :indicator="indicator"
        indicatorColor="#f8f8f8"
        indicatorActiveColor="#2DE8BD">
        <view v-for="(item, index) in list" :key="index">
            <image :src="item.image"></image>
        </view>
    </fu-scroll-list>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    let indicator = ref(true);
    const list = ref([
        { image: '' },
        { image: '' },
        { image: '' },
        { image: '' },
        { image: '' },

    ]);
</script>

API ​

ScrollList Props ​

属性名说明类型默认值可选值
indicator是否显示指示器Booleantruefalse
indicatorWidth指示器整体的宽度String80px-
indicatorBarWidth指示器滑块的宽度String4px-
indicatorColor指示器的颜色String#f2f2f2-
indicatorActiveColor指示器滑块激活时的颜色String#2979ff-
indicatorStyle指示器的位置/样式String｜Object--

ScrollList Events ​

事件名说明回调参数
onLeft左侧滑动时触发() => void
onRight右侧滑动时触发() => void