微信小程序双瀑布流布局+动态懒加载

效果图

实现代码：

思路：

将双瀑布流分为left、right两个数据流，通过动态获取两边数据的动态高度来进行判断，下一条数据插入低的一方。

因为用户所上传图片高度不一致，所以image的mode属性分为两种，如果图片宽高比大于1.5倍，则使用aspectFill属性，如果正常图片比例，则使用widthFix属性。

数据分页处理，懒加载数据，使用微信小程序onPageScroll属性动态获取到滚动条高度，判断滚动条滚动位置，进行请求数据，实现数据加载。

html：

          <!-- 内容部分 --><view class="container" ><view id="left"><view  class="listWrap" wx:for="{{leftList}}" catchtap="bottomButton" data-id="{{item.id}}" ><image src="{{item.imglist[0]}}"mode='{{item.mode=="screenshot"?"aspectFill":"widthFix"}}' style="max-height:400rpx;height:340rpx;" ></image><text class="listText">{{item.title}}</text></view></view><view id="right"><view class="listWrap" wx:for="{{rightList}}" wx:key="index" catchtap="bottomButton" data-id="{{item.id}}"><image src="{{item.imglist[0]}}" mode='{{item.mode=="screenshot"?"aspectFill":"widthFix"}}' style="max-height:400rpx;height:340rpx;" ></image><text class="listText">{{item.title }}</text></view></view></view>

js：

 // 1.调用接口获取信息getDataList() {let that = this;let timestamp = Date.parse(new Date()) / 1000;const data = {page: that.data.page.toString(),t: timestamp,openid: that.data.openId}// 调用秘钥方法let sign = CryptoJS.AesEncryptECB(JSON.stringify(data))wx.request({url: 'http://xxxxx?',data: { ...data, sign },method: 'GET',header: {'content-type': 'application/xml'},success: function (res) {let resData = res.data.data;// 获取图片信息that.getImgData(resData, 0);},fail: function (err) {console.log(err)},})},// 获取图片尺寸，判断image的mode属性，// 如果长宽比例 > 1.5 则使用aspectFill，否则使用widthFixgetImgData(resData, index) {let that = this;if (index < resData.length) {wx.request({url: resData[index].imglist[0].split('@base')[0]+'@base@tag=imageInfo',method: 'GET',header: {'content-type': 'application/xml'},success: function (res) {if (res.data.height / res.data.width > 1.5) {resData[index].mode = 'screenshot';index += 1that.getImgData(resData, index)} else {resData[index].mode = '';index += 1that.getImgData(resData, index)}},fail: function (err) {console.log(err)},})} else {that.setData({dataList: that.data.dataList.concat(resData),})// 调用瀑布流布局方法that.isLeft();}},/* 首页瀑布流布局 */// 判断左右插入async isLeft() {const { dataList, leftList, rightList } = this.data;let newDataList = dataList.slice(-10);query = wx.createSelectorQuery();for (const item of newDataList) {leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item);//判断两边高度，来觉得添加到那边await this.getBoxHeight(leftList, rightList);}},// 布局对比getBoxHeight(leftList, rightList) { //获取左右两边高度return new Promise((resolve, reject) => {this.setData({ leftList, rightList }, () => {query.select('#left').boundingClientRect();query.select('#right').boundingClientRect();query.exec((res) => {leftHeight = res[0].height; //获取左边列表的高度rightHeight = res[1].height; //获取右边列表的高度resolve();});});})},// 通过监听滚动条，动态加载数据/* onPageScroll: tools.throttle(function (res) { */ // 引入外部节流函数onPageScroll: function (res) {let scrollTop = res.scrollTop;if (scrollTop >= this.data.scrollHight) {console.log("加载下一页")this.setData({scrollHight: this.data.scrollHight + 800})this.getDataList()}},

微信小程序双瀑布流布局+动态懒加载相关推荐

微信小程序媒体组件-image图片懒加载效果
image 基础库 1.0.0 开始支持,低版本需做兼容处理. 图片.支持 JPG.PNG.SVG.WEBP.GIF 等格式,2.3.0 起支持云文件ID. 属性类型默认值必填说明最低版本 ...
微信小程序实现瀑布流布局
微信小程序实现瀑布流布局实现的效果图如下显示: 一,需求分析布局分为两列,两列的高度随着图片的插入而改变默认给左右两列插入一张图片,插入图片后,根据两列的的高度做为判断依据,依次给高度更低的一列 ...
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
微信小程序图片处理方案，解决加载缓慢，影响用户体验
1.改变图片尺寸:对于上传的图片,在后台对图片进行可接受范围内的最大限度压缩,图片宽高不用太大,大概预留你图片容器的1.5倍就行了,除非你做图片放大镜功能,否则小程序上加载2倍图意义不大,清晰度体验也 ...
微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实 ...
微信小程序下拉刷新和上拉加载的实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一: 下拉刷新下拉刷新两个步骤就能实现. 1.在要实现下拉刷新的页面的json配置文件里面加上 &q ...
【微信技术-微信小程序】------- 渐进式骨架屏（加载流）（第二篇）
提示:看如下内容需要了解第一篇:简单入门(骨架屏(加载流) 简单入门(第一篇)) 目录一.什么是渐进式骨架屏? 二.实现渐进式骨架屏三.效果展示下载示例代码地址: 渐进式骨架屏示例代码-下载一 ...
微信小程序下拉刷新/上拉加载组件
简介一款基于官方组件scroll-view进行封装的支持上拉加载下拉刷新的微信小程序组件,需要基础库2.10.1及以上, 项目地址:github 预览功能下拉刷新上拉加载支持自定义下拉样式 ...

微信小程序双瀑布流布局+动态懒加载

效果图

实现代码：

微信小程序双瀑布流布局+动态懒加载相关推荐

最新文章

热门文章