更新记录
1.0.0(2024-11-28) 下载此版本
v1.0.0 第一次发布
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | - | - | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | - | - | √ | √ | - | - |
miran-waterfall 使用示例
<miran-waterfall ref="waterfall" :addTime="100" v-model="list" @changeList="changeList" idKey="_id">
<template #list1>
<view v-for="(item, index) in list1 || []" :key="'list1'+index">
<waterfall-item :item="item" @onclick="toDetail" />
</view>
</template>
<template #list2>
<view v-for="(item, index) in list2 || []" :key="'list2'+index">
<waterfall-item :item="item" @onclick="toDetail" />
</view>
</template>
</miran-waterfall>
export default {
name: "waterfall",
props: {
dataList: {
type: Array,
require: true,
default: () => {
return []
}
}
},
watch: {
dataList: {
handler(nVal) {
this.list = JSON.parse(JSON.stringify(nVal));
},
deep: true
}
},
data() {
return {
list: [],
list1: [],
list2: []
}
},
methods: {
/**
* 清空瀑布流
*/
clearList() {
this.list = [];
this.list1 = [];
this.list2 = [];
this.$refs.waterfall.clear();
},
/**
* 重要 手动添加项
* @param {Object} e
*/
changeList(e) {
this[e.name].push(e.value);
},
/**
* 跳转到页面
* @param {Object} url
*/
toDetail: function(id) {
uni.navigateTo({
url: ``
})
}
}
}
item的数据格式,waterfall-item支持solt,可自定义显示,详细操作自已看代码
item :{
title,
subtitle,
imageUrl
}