diff --git a/uniapp-extend/uni_modules/helang-waterfall/changelog.md b/uniapp-extend/uni_modules/helang-waterfall/changelog.md index 70069246bb3cf17180543ee9251e53a1c851801b..e6f216de2d1604aaa6dacf6968eb1b9459f14a6b 100644 --- a/uniapp-extend/uni_modules/helang-waterfall/changelog.md +++ b/uniapp-extend/uni_modules/helang-waterfall/changelog.md @@ -1,3 +1,6 @@ +## 1.2.3(2024-11-02) +- [修复] 组件重新渲染时未重置待渲染位置的问题 +- [优化] 图片宽度支持 px 单位 ## 1.2.2(2024-10-18) - [修复] 解决了因为数据id重复导致的 小程序平台 waterfall-item 组件不会重新渲染的问题 ## 1.2.1(2024-10-07) diff --git a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue index 91f608a3db945bdfb8e3a17736a14f87d24c27ce..f582352b5501f777581ed5f9cc4083f4a8f26b5e 100644 --- a/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue +++ b/uniapp-extend/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue @@ -60,7 +60,7 @@ }, // 图片宽度 imageWidth:{ - type: Number, + type: Number | String, default:305 }, // 缓存高度(加速渲染) @@ -109,7 +109,7 @@ uni[IMAGE_CACHE_KEY] = {}; } IMAGE_URL_KEY = this.$props.imageKey; - IMAGE_PX_WIDTH = uni.upx2px(this.$props.imageWidth) + IMAGE_PX_WIDTH = this.getImagePxWidth(); }, mounted() { @@ -125,6 +125,18 @@ } this.renderList = list; this.renderListHeight = heights; + this.waitPushIndex = 0; + }, + // 获取图片的 px 宽度 + getImagePxWidth(){ + const width = this.$props.imageWidth; + // 是否为px单位 + if(/^\d+px$/i.test(String(width))){ + return parseInt(width); + }else{ + return uni.upx2px(parseInt(width) || 0) + } + }, // 处理图片加载 handleImageLoad(e){ diff --git a/uniapp-extend/uni_modules/helang-waterfall/package.json b/uniapp-extend/uni_modules/helang-waterfall/package.json index 254ec1ef547c572267e91566e63f07abf5b8e2e1..f87368e2205c0b873df9f0eb434b60ef82d53591 100644 --- a/uniapp-extend/uni_modules/helang-waterfall/package.json +++ b/uniapp-extend/uni_modules/helang-waterfall/package.json @@ -1,8 +1,8 @@ { "id": "helang-waterfall", "displayName": "瀑布流布局-waterfall", - "version": "1.1.6", - "description": "这是一款简单又好用的瀑布流布局模板,通过页面模板+组件的方式。充分利用组件的复用性和页面的生命周期。", + "version": "1.2.3", + "description": "一款简单又好用的瀑布流布局组件,全新升级为组件+插槽的方案实现,极大的简便了组件的使用和内容调整。", "keywords": [ "瀑布流", "布局", @@ -11,7 +11,7 @@ ], "repository": "https://gitee.com/myDarling/uniapp-extend", "engines": { - "HBuilderX": "^3.2.11" + "HBuilderX": "^4.0" }, "dcloudext": { "sale": { @@ -39,7 +39,8 @@ "platforms": { "cloud": { "tcb": "y", - "aliyun": "y" + "aliyun": "y", + "alipay": "n" }, "client": { "App": { diff --git a/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue b/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue index 42486b6a0af552e3ef6ebb481bc20c0fb66069ad..d1a75df1a185bec8a5c2e6de60394b9bd484e8cd 100644 --- a/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue +++ b/uniapp-extend/uni_modules/helang-waterfall/pages/waterfall/waterfall.vue @@ -94,7 +94,9 @@ }, // 瀑布流组件相关 waterfall:{ + // 组件状态 status:'', + // 是否渲染完成 renderEnd:true } } @@ -104,7 +106,10 @@ }, // 触底触发 onReachBottom() { - this.getList(); + // 渲染完成,才允许请求下一页 + if(this.waterfall.renderEnd){ + this.getList(); + } }, // 下拉刷新 onPullDownRefresh(){ @@ -124,8 +129,8 @@ }, // 获取数据 getList() { - // 请求和渲染未完成前禁止发起请求 - if (!this.ajax.load || !this.waterfall.renderEnd) { + // 请求未完成前禁止发起请求 + if (!this.ajax.load) { return; } this.ajax.load = false; diff --git a/uniapp-extend/uni_modules/helang-waterfall/readme.md b/uniapp-extend/uni_modules/helang-waterfall/readme.md index 7dfa13b2d62c9d455b5c244a63bbac63ac5b69aa..bb109271d610ff6e37abebd0329da93a3a18ec7b 100644 --- a/uniapp-extend/uni_modules/helang-waterfall/readme.md +++ b/uniapp-extend/uni_modules/helang-waterfall/readme.md @@ -61,7 +61,7 @@ tips | - | 瀑布流列表下方提示信息 属性名 | 类型 | 默认值 | 说明 --------|------|------|------ col | Number | 2 | 列表分栏数量,`不可动态修改` -imageWidth | Number | 305 | 列表中图片渲染的真是rpx单位的宽度,`不可动态修改`,305是示例列表的图片渲染宽度 +imageWidth | Number / String | 305 | 列表中图片渲染的宽度,可支持 px 和 rpx单位的宽度,Number类型为rpx单位,若需要px单位则可写`152px`, `不可动态修改`,305是示例列表的图片渲染宽度 imageKey | String | url | 数据中图片的key值,默认为`url` hideList | Boolean | false | 是否隐藏列表,可隐藏列表部分来展示更多的提示内容(如:空列表时) cacheImageHeight | Boolean | true | 是否缓存图片高度,能减少图片信息的加载过程提高渲染效率。