first commit
This commit is contained in:
PC-202306242200\Administrator
16
uni_modules/liu-waterfall/changelog.md
Normal file
16
uni_modules/liu-waterfall/changelog.md
Normal file
@@ -0,0 +1,16 @@
|
||||
## 1.0.7（2023-06-08）
|
||||
增加预览二维码
|
||||
## 1.0.6（2023-05-31）
|
||||
增加license
|
||||
## 1.0.5（2023-05-20）
|
||||
优化
|
||||
## 1.0.4（2023-05-16）
|
||||
增加示例
|
||||
## 1.0.3（2023-05-15）
|
||||
超级好用版本发布
|
||||
## 1.0.2（2023-04-14）
|
||||
增加示例
|
||||
## 1.0.1（2023-04-04）
|
||||
更新文档
|
||||
## 1.0.0（2023-04-04）
|
||||
初版发布
|
||||
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<view class="waterfall" :style="'background-color:'+bgColor">
|
||||
<view v-for="(item, index) in columnData" :key="index" class="column" :style="{ width: columnWidth + 'px' }">
|
||||
<view v-for="(childItem, childIndex) in item" :key="childIndex" style="width: 100%"
|
||||
:id="'item' + childItem.id" @click.stop="click(childItem)">
|
||||
<view class="item"
|
||||
:style="'background-color:'+cardBgColor+';margin:'+margin+'rpx;border-radius:'+radius+'rpx;'">
|
||||
<image :src="childItem.picUrl" mode="widthFix" lazy-load
|
||||
:style="{height:childItem.height,width: '100%'}">
|
||||
</image>
|
||||
<view class="title-info">
|
||||
<view class="item-title">{{ childItem.title }}</view>
|
||||
<view class="item-desc">{{ childItem.desc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
//数据源
|
||||
dataList: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: []
|
||||
},
|
||||
//显示列数
|
||||
column: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 2
|
||||
},
|
||||
//卡片margin(rpx)
|
||||
margin: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
//卡片圆角(rpx)
|
||||
radius: {
|
||||
type: Number,
|
||||
default: 8
|
||||
},
|
||||
//页面背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#edeef2'
|
||||
},
|
||||
//卡片背景颜色
|
||||
cardBgColor: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columnData: [],
|
||||
columnWidth: 0,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
dataList: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler(newValue, oldValue) {
|
||||
this.$nextTick(()=>{
|
||||
this.setColumnWidth()
|
||||
this.setData()
|
||||
})
|
||||
},
|
||||
},
|
||||
column: {
|
||||
immediate: false,
|
||||
deep: true,
|
||||
handler(newValue) {
|
||||
this.$nextTick(()=>{
|
||||
this.setColumnWidth()
|
||||
this.setData()
|
||||
})
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
//计算每列的高度
|
||||
getElemHeight(index) {
|
||||
this.$nextTick(() => {
|
||||
var arr = [];
|
||||
this.dataList.map((item, index) => {
|
||||
uni.getImageInfo({
|
||||
src: item.picUrl,
|
||||
success: (e) => {
|
||||
item.height = (e.height * (this.columnWidth / e.width)) + 'px'
|
||||
this.createSelectorQuery().select('#item' + item.id)
|
||||
.boundingClientRect(res => {
|
||||
arr.push({
|
||||
...{
|
||||
itemHeight: res.height
|
||||
},
|
||||
...item
|
||||
});
|
||||
if (arr.length == this.dataList.length) {
|
||||
this.columnData = this.distributeToNArrays(arr,
|
||||
this.column);
|
||||
}
|
||||
}).exec();
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
distributeToNArrays(arr, n) {
|
||||
let sums = new Array(n).fill(0);
|
||||
return arr.reduce(
|
||||
(arrays, item) => {
|
||||
let minSum = Math.min(...sums);
|
||||
let minIndex = sums.indexOf(minSum);
|
||||
arrays[minIndex].push(item);
|
||||
sums[minIndex] += item.itemHeight;
|
||||
return arrays;
|
||||
},
|
||||
new Array(n).fill().map(() => []),
|
||||
)
|
||||
},
|
||||
setColumnWidth() {
|
||||
let width = uni.getSystemInfoSync().windowWidth
|
||||
this.columnWidth = Math.floor(width / this.column)
|
||||
},
|
||||
setData() {
|
||||
const resultArray = this.dataList.reduce(
|
||||
(acc, cur, index) => {
|
||||
const targetIndex = index % this.column;
|
||||
acc[targetIndex].push(cur);
|
||||
return acc;
|
||||
},
|
||||
Array.from(Array(this.column), () => []),
|
||||
);
|
||||
this.columnData = resultArray
|
||||
this.getElemHeight()
|
||||
},
|
||||
click(item) {
|
||||
this.$emit('click', item)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.waterfall {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title-info {
|
||||
padding: 0rpx 20rpx 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
line-height: 46rpx;
|
||||
text-align: justify;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
margin-top: 4rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
line-height: 34rpx;
|
||||
text-align: justify;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
</style>
|
||||
6
uni_modules/liu-waterfall/license.md
Normal file
6
uni_modules/liu-waterfall/license.md
Normal file
@@ -0,0 +1,6 @@
|
||||
### 1、本插件可免费下载使用；
|
||||
### 2、未经许可，严禁复制本插件派生同类插件上传插件市场；
|
||||
### 3、未经许可，严禁在插件市场恶意复制抄袭本插件进行违规获利;
|
||||
### 4、对本软件的任何使用都必须遵守这些条款，违反这些条款的个人或组织将面临法律追究。
|
||||
|
||||
|
||||
85
uni_modules/liu-waterfall/package.json
Normal file
85
uni_modules/liu-waterfall/package.json
Normal file
@@ -0,0 +1,85 @@
|
||||
{
|
||||
"id": "liu-waterfall",
|
||||
"displayName": "瀑布流、自定义瀑布流、超级好用的瀑布流组件",
|
||||
"version": "1.0.7",
|
||||
"description": "(超级好用)瀑布流，根据内容自动计算进行流式布局，简单参数配置，支持多列布局(走过路过不要错过)",
|
||||
"keywords": [
|
||||
"瀑布流",
|
||||
"自定义瀑布流",
|
||||
"瀑布流式布局",
|
||||
"瀑布流布局",
|
||||
"瀑布"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "u"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "u",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "u",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
156
uni_modules/liu-waterfall/readme.md
Normal file
156
uni_modules/liu-waterfall/readme.md
Normal file
@@ -0,0 +1,156 @@
|
||||
# liu-waterfall适用于uni-app项目的瀑布流组件
|
||||
### 本组件目前兼容微信小程序、H5
|
||||
### 本组件是超级好用的瀑布流，根据内容自动计算进行流式布局，简单参数配置，支持多列布局(走过路过不要错过)
|
||||
# --- 扫码预览、关注我们 ---
|
||||
|
||||
## 扫码关注公众号，查看更多插件信息，预览插件效果！
|
||||
|
||||
|
||||
|
||||
### 使用示例
|
||||
```
|
||||
<template>
|
||||
<view>
|
||||
<view class="bar-list">
|
||||
<view @click="columns=2" :style="columns==2?'background-color:red':''">2列</view>
|
||||
<view @click="columns=3" :style="columns==3?'background-color:red':''">3列</view>
|
||||
<view @click="columns=4" :style="columns==4?'background-color:red':''">4列</view>
|
||||
</view>
|
||||
<liu-waterfall :dataList="data" :column="columns" @click="click"></liu-waterfall>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [{
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
|
||||
title: '思考',
|
||||
desc: '我是第1个图片',
|
||||
id: 1,
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2021/07/22/11/25/rabbit-6485072_1280.jpg',
|
||||
title: '兔子',
|
||||
desc: '我是第2个图片',
|
||||
id: 2,
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg',
|
||||
title: '雨天',
|
||||
desc: '我是第3个图片',
|
||||
id: 3,
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png',
|
||||
title: '日落',
|
||||
desc: '我是第4个图片',
|
||||
id: 4,
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2022/11/29/19/05/boho-7625140_1280.jpg',
|
||||
title: '植物',
|
||||
desc: '我是第5个图片',
|
||||
id: 5,
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2022/08/25/23/06/woman-7411414_1280.png',
|
||||
title: '时尚',
|
||||
desc: '我是第6个图片',
|
||||
id: 6,
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2023/03/07/12/45/child-7835677_1280.jpg',
|
||||
title: '生活',
|
||||
desc: '我是第7个图片',
|
||||
id: 7,
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
|
||||
title: '思考',
|
||||
desc: '我是第8个图片',
|
||||
id: 8,
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2021/07/22/11/25/rabbit-6485072_1280.jpg',
|
||||
title: '兔子',
|
||||
desc: '我是第9个图片',
|
||||
id: 9,
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg',
|
||||
title: '雨天',
|
||||
desc: '我是第10个图片',
|
||||
id: 10,
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2022/11/29/19/05/boho-7625140_1280.jpg',
|
||||
title: '植物',
|
||||
desc: '我是第11个图片',
|
||||
id: 11,
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2022/08/25/23/06/woman-7411414_1280.png',
|
||||
title: '时尚',
|
||||
desc: '我是第12个图片',
|
||||
id: 12,
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2023/03/07/12/45/child-7835677_1280.jpg',
|
||||
title: '生活',
|
||||
desc: '我是第13个图片',
|
||||
id: 13,
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg',
|
||||
title: '雨天',
|
||||
desc: '我是第14个图片',
|
||||
id: 14,
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2023/03/07/12/45/child-7835677_1280.jpg',
|
||||
title: '生活',
|
||||
desc: '我是第15个图片',
|
||||
id: 15,
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
|
||||
title: '思考',
|
||||
desc: '我是第16个图片',
|
||||
id: 16,
|
||||
}],
|
||||
columns: 2,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
click(e) {
|
||||
console.log('点击内容', e)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #edeef2;
|
||||
}
|
||||
|
||||
.bar-list {
|
||||
margin: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
view {
|
||||
width: 33%;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
background-color: #59a3f8;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 属性说明
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| ----------------------------|--------------- | ---------------------- | ---------------|
|
||||
| dataList | Array | [] | 数据源
|
||||
| column | Number | 2 | 显示列数
|
||||
| margin | Number | 10 | 卡片margin(rpx)
|
||||
| radius | Number | 8 | 卡片圆角(rpx)
|
||||
| bgColor | String | #edeef2 | 页面背景颜色
|
||||
| cardBgColor | String | #FFFFFF | 卡片背景颜色
|
||||
| @click | Function | | 点击卡片回调事件
|
||||
|
||||
Reference in New Issue
Block a user