更新记录
1.0.0(2024-11-28)
下载此版本
v1.0.0 第一次发布
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
× |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
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
}