更新记录

1.0.1（2024-06-24）

更新使用示例

1.0.0（2024-06-24）

新增

平台兼容性

hbxw-scroll-list组件

介绍

滚播列表组件，用于文字滚动播放，或者一些列表信息（如中奖信息）的滚播

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。

<template>
    <view class="test-container">
        <text class="test-title">无缝滚动</text>
        <hbxw-scroll-list :list="list" @change="scrollPlaying"></hbxw-scroll-list>

        <view class="separate"></view>

        <text class="test-title">无缝滚动,一屏显示多个，具体显示多少个根据你定的wrapHeight确定</text>
        <hbxw-scroll-list :list="list" wrapHeight="288rpx" itemHeight="96rpx"></hbxw-scroll-list>

        <view class="separate"></view>

        <text class="test-title">非元缝滚动</text>
        <hbxw-scroll-list :list="list" :loop="false"></hbxw-scroll-list>

        <view class="separate"></view>

        <text class="test-title">动态修改list0数据</text>
        <hbxw-scroll-list :list="list0" :loop="false"></hbxw-scroll-list>
        <button @click="resetData">动态获取list0数据</button>

        <view class="separate"></view>

        <text class="test-title">自定义slot</text>
        <hbxw-scroll-list :list="list" wrapHeight="168rpx" itemHeight="168rpx">
            <template #default="{item, height}">
                <view class="scroll-item">
                    <text>{{item.text}}</text>
                    <text>{{item.name}}:{{height}}</text>
                </view>
            </template>
        </hbxw-scroll-list>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [
                    {
                        name: '天使',
                        text: '获得了某某奖品'
                    },
                    {
                        name: '恶魔',
                        text: '获得了大奖品'
                    },
                    {
                        name: '受难者',
                        text: '获得了安慰奖'
                    },
                    {
                        name: '路过者',
                        text: '获得了某某奖品'
                    },
                    {
                        name: '第三者第三者',
                        text: '获得了安慰奖'
                    },
                ],
                list0: []
            }
        },
        methods: {
            resetData() {
                this.list0 = [
                    {
                        name: '天使',
                        text: '获得了某某奖品'
                    },
                    {
                        name: '恶魔',
                        text: '获得了大奖品'
                    },
                    {
                        name: '受难者',
                        text: '获得了安慰奖'
                    },
                    {
                        name: '路过者',
                        text: '获得了某某奖品'
                    },
                    {
                        name: '第三者第三者',
                        text: '获得了安慰奖'
                    }
                ]
            },
            scrollPlaying(index) {
                console.log('---- scrollPlaying ----:', index)
            }
        }
    }
</script>

<style lang="scss" scoped>
.scroll-item{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 168rpx;
    background-color: green;
}
.separate{
    width: 100%;
    height: 2rpx;
    margin: 20rpx 0;
    background-color: #ccc;
}
</style>

注：默认是左右结构的滚播条，左name值左text值，如果对滚动内容有特殊要求可通过slot来自定义

API

Props

Events