更新记录
1.0.0(2023-07-08) 下载此版本
基础版本
平台兼容性
qy-scroll-view
当前组件可用作金刚区滑动列表 源码简单易懂,注释清晰明了, 组件目前是一个基础版本,组件高度暂时是一个写死状态,后续会各方面进行优化,可根据自己业务需求更改源码,多多包含。
使用方法
属性
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
value | Array | [] | v-model 绑定一个数组 |
imgKeyName | String | imageUrl | 组件读取的图片key |
labelKeyName | String | title | 组件读取底部文字的key |
count | number | 10 | 一屏展示几个 |
showDot | Boolean | true | 是否显示底部滑块 |
activeColor | String | #F19CA3 | 底部滑块颜色 |
数据源dataSource
[
{
imageUrl: "/static/logo.png", // 图片
link: "", // 跳转链接
title: "title" // 底部显示文字
}
]
案例
<template>
<view class="" style="padding:20rpx">
<qy-scroll-view v-model="list" @emitClick="emitClick"></qy-scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
list: []
}
},
onLoad() {
for (var i = 0; i < 15; i++) {
this.list.push({
imageUrl: "/static/logo.png",
link: "",
title: "title"
})
}
},
methods: {
emitClick(item, index) {
console.log(item, index);
}
}
}
</script>