更新记录

1.0.5（2024-12-31） 下载此版本

1.支持vue3啦 2.优化插件的流畅性

1.0.4（2024-08-23） 下载此版本

修复在H5上运行报错的问题；经测试小程序、H5、App均正常使用！有问题及时联系

1.0.3（2024-07-18） 下载此版本

更新支持图片滚动（图片大小保持一致），但不仅限于支持图片，任何内容都可以的；有问题随时联系 ZhangHaoqwezxc

查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ √ √ √ × - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
√ - - - - - - - - - -

其他

多语言 暗黑模式 宽屏模式
× × √

使用说明

下载后可直接使用，插件符合uni_modules规则；自定计算行高，使用方便

使用方式
下载后可直接使用,自定义插槽传参scope.row和scope.index
在页面中使用组件
<scrollList :list="goods_list">
    <template #scroll="scope">
        <view class="rows">
            <view>自定义内容</view>
        </view>
    </template>
</scrollList>

参数说明

参数 类型 默认值 描述
list Array [] 滚动循环数据
time Number 2000 滚动间隔时间（单位ms）
min Number 3 最少几条数据开始滚动
height Number 520 滚动区域的高度(单位rpx)
name String name 左边属性名
time_name String time 右边属性名
vue3示例
<template>
    <view class="">
        <view class="content">
            <view class="title">循环滚动列表，支持小程序、h5、app</view>
            <view class="titlea">支持slot自定义内容</view>
            <view class="scroll_list">
                <scrollList :list="goods_list" :height='1000'>
                    <template #scroll="scope">
                        <view class="rows">
                            <image class="rows_img" :src="scope.rows.img" mode=""></image>
                            <view class="rows_name">{{scope.rows.name}}</view>
                            <view class="rows_time">{{scope.rows.time}}</view>
                        </view>
                    </template>
                </scrollList>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>

    import { ref } from 'vue'

    const goods_list = ref([{
        id: 1,
        name: '用户1(支持图片或自定义内容滚动啦)',
        time: '54分钟前',
        img: 'https://cdn.uviewui.com/uview/album/1.jpg'
    },
    {
        id: 2,
        name: '用户2(支持图片或自定义内容滚动啦)',
        time: '54分钟前',
        img: 'https://cdn.uviewui.com/uview/album/2.jpg'
    }, {
        id: 3,
        name: '用户3(支持图片或自定义内容滚动啦)',
        time: '54分钟前',
        img: 'https://cdn.uviewui.com/uview/album/3.jpg'
    }, {
        id: 4,
        name: '用户4(支持图片或自定义内容滚动啦)',
        time: '54分钟前',
        img: 'https://cdn.uviewui.com/uview/album/4.jpg'
    }, {
        id: 5,
        name: '用户5(支持图片或自定义内容滚动啦)',
        time: '54分钟前',
        img: 'https://cdn.uviewui.com/uview/album/5.jpg'
    }, {
        id: 6,
        name: '用户6(支持图片或自定义内容滚动啦)',
        time: '54分钟前',
        img: 'https://cdn.uviewui.com/uview/album/6.jpg'
    }, {
        id: 7,
        name: '用户7(支持图片或自定义内容滚动啦)',
        time: '54分钟前',
        img: 'https://cdn.uviewui.com/uview/album/1.jpg'
    }, {
        id: 8,
        name: '用户8(支持图片或自定义内容滚动啦)',
        time: '54分钟前',
        img: 'https://cdn.uviewui.com/uview/album/2.jpg'
    }, {
        id: 9,
        name: '用户9(支持图片或自定义内容滚动啦)',
        time: '54分钟前',
        img: 'https://cdn.uviewui.com/uview/album/3.jpg'
    }, {
        id: 10,
        name: '用户10(支持图片或自定义内容滚动啦)',
        time: '54分钟前',
        img: 'https://cdn.uviewui.com/uview/album/4.jpg'
    }])

</script>

<style lang="scss" scoped>
    .content {
        padding: 12upx;

        .title {
            text-align: center;
            margin-bottom: 10upx;
            font-size: 30upx;
            color: #333;
            font-weight: bold;
        }

        .titlea {
            text-align: center;
            margin-bottom: 20upx;
            font-size: 26upx;
            color: #333;
            font-weight: bold;
        }

        .scroll_list {
            padding: 0 24upx;

            .rows {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 30rpx;

                .rows_img {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 10rpx;
                }

                .rows_name {
                    font-size: 26rpx;
                    font-weight: 600;
                    color: #333;
                }

                .rows_time {
                    font-size: 24rpx;
                    color: #999;
                }
            }
        }
    }
</style>
vue2示例
<template>
    <view class="">
        <view class="content">
            <view class="title">循环滚动列表，支持小程序、h5、app</view>
            <view class="titlea">支持slot自定义内容</view>
            <view class="scroll_list">
                <scrollList :list="goods_list" :height='1000'>
                    <template #scroll="scope">
                        <view class="rows">
                            <image class="rows_img" :src="scope.rows.img" mode=""></image>
                            <view class="rows_name">{{scope.rows.name}}</view>
                            <view class="rows_time">{{scope.rows.time}}</view>
                        </view>
                    </template>
                </scrollList>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                goods_list: [{
                        id: 1,
                        name: '用户1(支持图片或自定义内容滚动啦)',
                        time: '54分钟前',
                        img: 'https://cdn.uviewui.com/uview/album/1.jpg'
                    },
                    {
                        id: 2,
                        name: '用户2(支持图片或自定义内容滚动啦)',
                        time: '54分钟前',
                        img: 'https://cdn.uviewui.com/uview/album/2.jpg'
                    }, {
                        id: 3,
                        name: '用户3(支持图片或自定义内容滚动啦)',
                        time: '54分钟前',
                        img: 'https://cdn.uviewui.com/uview/album/3.jpg'
                    }, {
                        id: 4,
                        name: '用户4(支持图片或自定义内容滚动啦)',
                        time: '54分钟前',
                        img: 'https://cdn.uviewui.com/uview/album/4.jpg'
                    }, {
                        id: 5,
                        name: '用户5(支持图片或自定义内容滚动啦)',
                        time: '54分钟前',
                        img: 'https://cdn.uviewui.com/uview/album/5.jpg'
                    }, {
                        id: 6,
                        name: '用户6(支持图片或自定义内容滚动啦)',
                        time: '54分钟前',
                        img: 'https://cdn.uviewui.com/uview/album/6.jpg'
                    }, {
                        id: 7,
                        name: '用户7(支持图片或自定义内容滚动啦)',
                        time: '54分钟前',
                        img: 'https://cdn.uviewui.com/uview/album/1.jpg'
                    }, {
                        id: 8,
                        name: '用户8(支持图片或自定义内容滚动啦)',
                        time: '54分钟前',
                        img: 'https://cdn.uviewui.com/uview/album/2.jpg'
                    }, {
                        id: 9,
                        name: '用户9(支持图片或自定义内容滚动啦)',
                        time: '54分钟前',
                        img: 'https://cdn.uviewui.com/uview/album/3.jpg'
                    }, {
                        id: 10,
                        name: '用户10(支持图片或自定义内容滚动啦)',
                        time: '54分钟前',
                        img: 'https://cdn.uviewui.com/uview/album/4.jpg'
                    },
                ]
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        padding: 12upx;

        .title {
            text-align: center;
            margin-bottom: 10upx;
            font-size: 30upx;
            color: #333;
            font-weight: bold;
        }

        .titlea {
            text-align: center;
            margin-bottom: 20upx;
            font-size: 26upx;
            color: #333;
            font-weight: bold;
        }

        .scroll_list {
            padding: 0 24upx;

            .rows {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 30rpx;

                .rows_img {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 10rpx;
                }

                .rows_name {
                    font-size: 26rpx;
                    font-weight: 600;
                    color: #333;
                }

                .rows_time {
                    font-size: 24rpx;
                    color: #999;
                }
            }
        }
    }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...