更新记录
1.0.2(2021-07-12)
1.0.1(2021-06-18)
优化只显示单列的情况。
1.0.0(2020-06-14)
1.0.0 (2020-06-14)
该组件采用了左右两个容器来布局瀑布流,而非使用绝对定位去实现,有效避免瀑布流排版失误导致页面重叠等情况。瀑布流图片可采用widthFix模式,不会因为再次加载的原因导致高度获取不精准等问题。该组件兼容了上拉刷新、触底加载等功能。
查看更多
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uniapp——瀑布流组件
该组件采用了左右两个容器来布局瀑布流,而非使用绝对定位去实现,有效避免瀑布流排版失误导致页面重叠等情况。瀑布流图片可采用widthFix模式,不会因为再次加载的原因导致高度获取不精准等问题。该组件兼容了上拉刷新、触底加载等功能。
喜欢的朋友麻烦到github给个Star:https://github.com/OUDUIDUI/uniapp_waterfalls_flow
兼容平台
H5 APP 小程序
瀑布流样式
可在WaterfallsFlowItem修改样式。
组件属性
属性名 |
类型 |
说明 |
wfList |
Array |
必填,瀑布流列表 |
updateNum |
Number |
默认为10,每次更新的数量 |
@itemTap |
EventHandle |
点击事件,返回item整个object |
使用方法
<template>
<view class="page">
<WaterfallsFlow :wfList='list' @itemTap="itemTap" />
</view>
</template>
<script>
import WaterfallsFlow from '../../components/WaterfallsFlow/WaterfallsFlow.vue'
export default {
components:{
WaterfallsFlow
},
data() {
return {
list:[],
requiredData:[] // 存放模拟加载的数据
}
},
onLoad() {
// 模拟请求数据
setTimeout(()=>{
this.list = this.requiredData;
},500)
},
onReachBottom(){
// 模拟触底刷新
setTimeout(()=>{
this.requiredData.push(...this.list);
},500)
},
onPullDownRefresh(){
// 模拟上拉刷新
setTimeout(()=>{
const newList = this.requiredData.reverse();
this.list = newList;
uni.stopPullDownRefresh();
},500)
},
methods:{
itemTap(item){
console.log(item);
}
}
}
</script>
<style lang="scss" scoped>
.page{
min-height: 100vh;
background: #eee;
}
</style>