更新记录
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>