更新记录

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

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

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

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

1.0.2（2023-12-11） 下载此版本

优化使用方法，使用更加方便简洁；添加自定义滚动高度，每行滚动高度，最少滚动条数；添加默认样式，支持自定义默认样式字段；优化代码质量；谢谢大家的支持，有任何问题或者有新的需求，可联系ZhangHaoqwezxc，我都尽量去解决问题！

平台兼容性

使用说明

注册组件后直接使用，支持自定义内容。

使用方式

import scrollList from '@/components/zh-scrollList/scrollList/scrollList'

在页面中使用组件

import scrollList from '@/components/zh-scrollList/scrollList/scrollList'

<scrollList :list="goods_list">
    <template #default="{rows}">
        <view class="rows">
            <view>自定义内容</view>
        </view>
    </template>
</scrollList>

参数说明

示例

<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 #default="{rows}">
                        <view class="rows">
                            <image class="rows_img" :src="rows.img" mode=""></image>
                            <view class="rows_name">{{rows.name}}</view>
                            <view class="rows_time">{{rows.time}}</view>
                        </view>
                    </template>
                </scrollList>
            </view>
        </view>
    </view>
</template>

<script>
    import scrollList from '@/components/zh-scrollList/scrollList/scrollList'
    export default {
        components: {
            scrollList
        },
        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>