ScrollList Horizontal Scrolling List Component

This component is generally used for scenarios where multiple products or categories are displayed simultaneously, and it can also implement a list that swipes left and right.

📌 Platform Difference Notes

APP(vue)	H5	WeChat Mini Program	Alipay Mini Program
✔	✔	✔	✔

🏯 Basic Usage Example

<!-- Global usage -->
<hy-scroll-list>
    <view v-for="(item, index) in list" :key="index">
        <image :src="item"></image>
    </view>
</hy-scroll-list>

const list = ref<any[]>([
    'https://img0.baidu.com/it/u=1913990970,584854398&fm=253&id=1',
    'http://mms2.baidu.com/it/u=204741874,3444396868&fm=253&id=2',
    'https://img2.baidu.com/it/u=3042825715,659259329&fm=253&id=3',
    'https://img2.baidu.com/it/u=109690972,2214958998&fm=253&id=4',
    'http://mms0.baidu.com/it/u=2161107790,808970254&fm=253&id=5',
    'https://img2.baidu.com/it/u=4211554685,400408647&fm=253&id=6',
    'https://img2.baidu.com/it/u=2237681987,1998118702&fm=253&id=7',
    'https://img1.baidu.com/it/u=2494879897,1602792615&fm=253&id=8',
]);

Business Implementation Code

vue

<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">View More</text>
            <up-icon name="arrow-leftward" color="#f56c6c" size="12"></up-icon>
        </view>
    </view>
</up-scroll-list>

index.ts

import { ref } from 'vue';

const goodsArr = [
    {
        price: '230.5',
        thumbnail:
            'https://img11.360buyimg.com/n1/s450x450_jfs/t1/281169/10/14028/31748/67ecf51dF384c5bd6/1ec0c214ea7a914e.png',
    },
    {
        price: '74.1',
        thumbnail:
            'https://img11.360buyimg.com/n1/s450x450_jfs/t1/281169/10/14028/31748/67ecf51dF384c5bd6/1ec0c214ea7a914e.png',
    },
    {
        price: '8457',
        thumbnail:
            'https://img11.360buyimg.com/n1/s450x450_jfs/t1/281169/10/14028/31748/67ecf51dF384c5bd6/1ec0c214ea7a914e.png',
    },
    {
        price: '1442',
        thumbnail:
            'https://img11.360buyimg.com/n1/s450x450_jfs/t1/281169/10/14028/31748/67ecf51dF384c5bd6/1ec0c214ea7a914e.png',
    },
    {
        price: '541',
        thumbnail:
            'https://img11.360buyimg.com/n1/s450x450_jfs/t1/281169/10/14028/31748/67ecf51dF384c5bd6/1ec0c214ea7a914e.png',
    },
    {
        price: '234',
        thumbnail:
            'https://img11.360buyimg.com/n1/s450x450_jfs/t1/281169/10/14028/31748/67ecf51dF384c5bd6/1ec0c214ea7a914e.png',
    },
    {
        price: '562',
        thumbnail:
            'https://img11.360buyimg.com/n1/s450x450_jfs/t1/281169/10/14028/31748/67ecf51dF384c5bd6/1ec0c214ea7a914e.png',
    },
    {
        price: '251.5',
        thumbnail:
            'https://img11.360buyimg.com/n1/s450x450_jfs/t1/281169/10/14028/31748/67ecf51dF384c5bd6/1ec0c214ea7a914e.png',
    },
];

// Methods
const left = () => {
    console.log('left');
};

const right = () => {
    console.log('right');
};

const showMore = () => {
    uni.showToast({ title: 'View More' });
};

index.scss

.scroll-list {
    display: flex;
    flex-direction: 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;
        display: flex;
        flex-direction: column;
        align-items: center;

        &__text {
            font-size: 12px;
            width: 12px;
            color: #f56c6c;
            line-height: 16px;
        }
    }
}

API

ScrollList Props

Parameter	Description	Type	Default
indicatorWidth	Overall width of the indicator; default unit is px	number	50
indicatorBarWidth	Width of the slider bar; default unit is px	number	20
indicator	Whether to show the panel indicator	boolean	true
indicatorColor	Inactive color of the indicator	string	-
indicatorActiveColor	Color of the indicator slider bar	string	-
indicatorStyle	Indicator style; can be positioned via bottom, left, right	CSSProperties	-

Events

Event Name	Description	Callback Parameters
scrollLeft	Triggered when scrolled to the left	-
scrollRight	Triggered when scrolled to the right	-

Slots

Slot Name	Description	Accepted Values
default	-	-

CSS Variables

Variable Name	Description	Default Value
--hy-scroll-list-indicator-width	Indicator width	60px
--hy-scroll-list-indicator-height	Indicator height	4px
--hy-scroll-list-indicator-bar-width	Indicator slider bar width	20px
--hy-scroll-list-indicator-radius	Indicator border radius	Follows --hy-radius-semicircle (100px)

12:33