小程序瀑布流无限加载

由于想做成瀑布流，故一开始使用如下的方式：

.waterfall-container {column-count: 2;column-gap: 30rpx;
}

但是，由于这种 column-count:2 ，是由上往下排的，所以再加载新的一页的时候，原来在页首的会被顶到底部，导致整个逻辑是错误的。

故，需要修改一下页面的实现思路

1. 在页首加入预加载的图片的不显示的块，加载图片时，会触发事件，

2. 在事件处理 function 中，进行图片的分发，根据当前的两列的实际高度，分发到两列中。

具体实现：

在页首加上 display: none 的块，用于预加载图片。

<view style="display:none"><image wx:for="{{prefetch_products.rows}}" data-id="{{item.id}}" data-image-src="{{item.cover}}" wx:for-item="item" src="{{item.cover}}"bindload="onImageLoad"></image>
</view>

JS:

onImageLoad: function (e) {var oriHeight = e.detail.height,oriWidth = e.detail.width,scale = oriHeight / oriWidth,destWidth = this.data.imageWidthRpx * rpxScale,     // 在不同机型中的具体图片宽度destHeight = scale * destWidth,id = e.currentTarget.dataset.id,src = e.currentTarget.dataset.imageSrc;// 分发到两边var col1 = this.data.col1,col2 = this.data.col2,loadingCount = this.data.loadingCount;// 比较两边的height// 哪个矮分发到哪个if (col1.height <= col2.height) {col1.images.push({id: id,src: src});col1.height += (destHeight + 39 * rpxScale); // 补偿 padding 的高度--loadingCount;} else {col2.images.push({id: id,src: src});col2.height += (destHeight + 39 * rpxScale); // 补偿 padding 的高度--loadingCount;}if (!loadingCount) {this.setData({prefetch_products: []});}this.setData({loadingCount: loadingCount,col1: col1,col2: col2});}

转载于:https://www.cnblogs.com/au_ww/p/7149645.html

小程序瀑布流无限加载相关推荐

利用ajax实现织梦dedecms瀑布流无限加载功能
该功能主要用到AJAX技术! 一.首先找到并打开/plus/list.php文件,在里面找到如下代码: require_once(dirname(__FILE__)."/../include ...
ajax瀑布流插件,jQuery瀑布流无限加载插件：jquery.falless.js
慌慌张张,匆匆忙忙,为何生活总是这样? 难道说,我的理想,就是这样度过一生的时光?........... 真的是一年一年飞逝而去,而人的一生,又有几个一年? 第一个四年即将结束,得到了什么?又失去了什 ...
瀑布流无限加载的原理
无限加载也叫上拉自动加载.瀑布流.滑动底部加载等,具体指的是页面刚开始不加载全部内容, 先加载首屏或者用户屏幕可见内容,当用户滑动页面到底部后,页面才自动加载更多内容. 通过window.scroll ...
JS——瀑布流无限加载以及动态生成a标签
如何实现瀑布流排列效果?看下面这张图通过js去比较每张图片的高度,然后进行排列. 这是一个模拟的瀑布流的list列表项 <div id="main"><div ...
【微信技术-微信小程序】------- 骨架屏(加载流)配置(skeleton-config)及属性详解 (第三篇)
本篇文章是骨架屏(skeleton)配置及属性详解(第三篇) 第一篇文章:[微信技术-微信小程序]-------骨架屏(加载流) 简单入门(第一篇) 第二篇文章:[微信技术-微信小程序]------- ...
uview 瀑布流_微信小程序瀑布流最好最简单的解决方案
网上能搜到的小程序瀑布流解决方案,要么代码复杂.逻辑混乱,要么实现不了业务功能,所以把我在项目中的实现方案给大家分享下. 最简单的实现方案,不适用有分页的场景. 这个方案简单的原因是因为仅仅使用了cs ...
分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理就是页面加载完毕的时候请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码我是改的 onload ...
微信小程序-首屏视频加载
项目场景: 微信小程序开发: 实现小程序首页视频预加载功能 1.获取设备的宽和高度 2.小程序video的使用获取设备的宽和高度 // 获取设备的宽和高度getsize() {let that = ...
微信小程序开发动感十足的加载动画--都在这里！
微信小程序开发动感十足的加载动画--都在这里.jpg 1. 概述我们在学习微信小程序时,应该会遇到载入图片或者动画需要等待的情况,那么这个等待的画面我们应该怎么编写呢?今天我们就分享这样的小教程. ...

小程序瀑布流无限加载

小程序瀑布流无限加载相关推荐

最新文章

热门文章