更新记录
1.0.2(2023-12-11)
优化使用方法,使用更加方便简洁;添加自定义滚动高度,每行滚动高度,最少滚动条数;添加默认样式,支持自定义默认样式字段;优化代码质量;谢谢大家的支持,有任何问题或者有新的需求,可联系ZhangHaoqwezxc,我都尽量去解决问题!
1.0.1(2023-12-11)
优化使用方法,使用更加方便简洁;添加自定义滚动高度,每行滚动高度,最少滚动条数;添加默认样式,支持自定义默认样式字段;优化代码质量;谢谢大家的支持,有任何问题或者有新的需求,可联系ZhangHaoqwezxc,我都尽量去解决问题!
1.0.0(2022-11-07)
支持 小程序、h5、app,请各路大神多多指教!!!
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.7.0 app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
√ |
√ |
√ |
使用说明
注册组件后直接使用,支持自定义内容。
使用方式
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>
参数说明
参数 |
类型 |
默认值 |
描述 |
list |
Array |
[] |
滚动循环数据 |
time |
Number |
2000 |
滚动间隔时间(单位ms) |
min |
Number |
3 |
最少几条数据开始滚动 |
height |
Number |
520 |
滚动区域的高度(单位rpx) |
line_height |
Number |
60 |
每次滚动的高度和每行的高度(单位rpx) |
name |
String |
name |
左边属性名 |
time_name |
String |
time |
右边属性名 |
示例
<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">
<template #default="{rows}">
<view class="rows">
<view class="">{{rows.name}}</view>
<view class="">{{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分钟前'
},
{
id: 2,
name: '用户2',
time: '54分钟前'
}, {
id: 3,
name: '用户3',
time: '54分钟前'
}, {
id: 4,
name: '用户4',
time: '54分钟前'
}, {
id: 5,
name: '用户5',
time: '54分钟前'
}, {
id: 6,
name: '用户6',
time: '54分钟前'
}, {
id: 7,
name: '用户7',
time: '54分钟前'
}, {
id: 8,
name: '用户8',
time: '54分钟前'
}, {
id: 9,
name: '用户9',
time: '54分钟前'
}, {
id: 10,
name: '用户10',
time: '54分钟前'
},
]
}
},
onLoad() {
},
methods: {
},
computed: {
},
watch: {
}
}
</script>
<style lang="scss" scoped>
.content {
padding: 24upx;
.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;
}
}
}
</style>