uniapp实现瀑布流懒加载实现和无限上拉加载更多

效果图：

说明：

函数说明：传入一个数组，循环获取图片高度，会根据把原数组拆分成两个数组，放在两列，
               计算单列累计高度，对比高度值的大小，实现瀑布流的布局，
               由于获取图片高度需要一定的时间，所以使用async await 阻塞for 循环的进程，
               每获取到一个图片的高度就赋值渲染到页面上，实现加载出一个图片就先渲染上去，达成图片懒加载的效果

               参数说明：
               必填：
                   arr：数组，里面有对象，对比对象里面的图片高度，返回两个数组
                   attributeName：要根据数组里对象指定属性名称（图片的 Key）
               非必填：
                   otherHeight：瀑布流的盒子其它组成部分的高度，例如点赞那行，因为瀑布流不单单是图片组成
                   minHeight: 图片最小高度，如果没有图片，也会使用最小高度，相当于默认高度
                   maxHeight:图片最大高度，超出高度就按照 maxHeight 进入当前列累计高度

代码：

<template><div class="page"><scroll-view style="height: 800px;" scroll-y="true" class="scroll-Y" @scrolltolower="loadMoreImages"><view class="main"><div class="view Left"><div class="content" v-for="(item, index) in firstList" :key="index"><div class="img-content"><div class="modle_mask" v-if="item.audit_status == 8">{{ item.audit_status == 8 ? "审核中":'' }}</div><div class="modle_mask" @click="openfail(item)" v-if="item.audit_status == 2">{{ item.audit_status==2 ? "审核未通过" : "" }}</div><image v-if="item.faceimg" :src="item.faceimg" class="image" mode="widthFix" :data-index="index" data-type="1"@click="goDetails(item)" /><img v-if="item.identity_type=='identity_type_admin'" class="approveImg" mode="heightFix" :src="approve" /></div><div class="text" v-if="type" @click="goDetails(item)">{{ item.title }}</div><div class="price" v-if="type"><div class="users"><img class="avatarUrl" :src="item.head_img" /><div class="nickName">{{ item.nick_name }}</div></div><div class="give" @click="giveLike(item,index,'firstList')"><img class="giveXin" :src="item.use_fabulous?aixin2:aixin1" /><div class="giveNum">{{ item.fabulous_num }}</div></div></div></div></div><div class="view Right"><div class="content" v-for="(item, index) in secondList" :key="index"><div class="img-content"><div class="modle_mask" v-if="item.audit_status == 8">{{ item.audit_status == 8 ? "审核中":'' }}</div><div class="modle_mask" @click="openfail(item)" v-if="item.audit_status == 2">{{ item.audit_status == 2 ? "审核未通过" : "" }}</div><image v-if="item.faceimg" :src="item.faceimg" class="image" mode="widthFix" :data-index="index" data-type="2"@click="goDetails(item)" /><img v-if="item.identity_type=='identity_type_admin'" class="approveImg" :src="approve" /></div><div v-if="type" class="text" @click="goDetails(item)">{{ item.title }}</div><div v-if="type" class="price"><div class="users"><img class="avatarUrl" :src="item.head_img" /><div class="nickName">{{ item.nick_name }}</div></div><div class="give" @click="giveLike(item,index,'secondList')"><img class="giveXin" :src="item.use_fabulous?aixin2:aixin1" /><div class="giveNum">{{ item.fabulous_num }}</div></div></div></div></div></view></scroll-view><view class="modal_mask" v-if="isTips"><view class="modaltips"><view class="modalPages"><image :src="failImage" class="coverImage"></image><view class="modelText1">很遗憾</view><view class="modelText1" style="margin-bottom: 70rpx">您的审核未通过</view><view class="modelText2">审核未通过原因：</view><view class="modelText2">{{ failText }}</view><view class="back" @click="close">返回</view></view></view></view></div>
</template><script>export default {props: {params: Object, //forumLists 接口的其它参数type: String, //好物种草我的嗮图传 type 嗮图 userForumLists，赞过 userFabulousListsurl: String // 判断是哪个社区模块调用的，imgCommunity 好物种草},data() {return {aixin1: this.$config.nhsImagesUrl + "community/aixin1xxxx.png",aixin2: this.$config.nhsImagesUrl + "community/aixin2ssss.png",failImage: this.$config.nhsImagesUrl + "community/fail.png",approve: this.$config.nhsImagesUrl + "community/approve.png",request_url: "",showImg: false,failText: "",dataList: [], // 数据源firstList: [], // 第一列数组secondList: [], // 第二列数组windowWidth: 0, // 页面视图宽度windowHeight: 0, // 视图高度imgMargin: 0, // 图片边距: 单位pximgWidth: 0, // 图片宽度: 单位pxtopArr: [0, 0], // 存储每列的累积toppageSize: 8,last: false,page: 1,like: true,isTips: false,i: 0};},created() {this.init();this.getGoodthingList();console.log('created-type', this.type)},watch: {type: function() {console.log('watch-type', this.type)},},onReachBottom() {console.log('onReachBottom', onReachBottom)this.loadMoreImages()},methods: {init() {this.dataList = [];this.firstList = [];this.secondList = [];this.last = false;this.imgMargin = 0; // 图片边距: 单位pxthis.topArr = [0, 0]; // 存储每列的累积topthis.pageSize = 8;this.page = 1;this.i = 0// debugger},// 显示未通过弹框openfail(item) {console.log(item);this.failText = item.auditRemark;this.isTips = true;},close() {this.isTips = false;},// 获取数据getGoodthingList() {// type userFabulousLists 赞过  userForumLists 嗮图if (this.type == 'userFabulousLists') {this.request_url = this.$api.community.userFabulousLists} else if (this.type == 'userForumLists') {this.request_url = this.$api.community.userForumLists} else {this.request_url = this.$api.community.forumLists}console.log('获取数据', this.type, this.request_url)this.$request(this.request_url, {page: this.page,pageSize: this.pageSize,...this.params,}).then((res) => {console.log('de', res)if (res.code == 0) {if (res.data.lists == null) {return wx.showToast({title: '非常抱歉没有找到相关信息',icon: 'none'})}this.page++;wx.hideLoading();this.last = res.data.last || false;this.dataList = res.data.lists;this.dataList.forEach((item, index) => {if (item.fabulous_num > 9999) {item.fabulous_num = parseFloat(item.fabulous_num / 10000).toFixed(1) + "万";} else {item.fabulous_num = item.fabulous_num;}item.use_fabulous = item.use_fabulous == 1 ? true : false});this.setDataList(this.dataList, 'faceimg');}});},/*函数说明：瀑布流获取图片高度计算方法，会把原数组拆分成两个数组返回参数说明：必填：arr：数组，里面有对象，对比对象里面的图片高度，返回两个数组attributeName：要根据数组里对象指定属性名称（图片的 Key）非必填：otherHeight：瀑布流的盒子其它组成部分的高度，例如点赞那列，因为瀑布流不单单是图片组成minHeight: 图片最小高度，如果没有图片，也会使用最小高度，相当于默认高度maxHeight:图片最大高度，高于就按照 maxHeight 算*/async setDataList(arr = [], attributeName, otherHeight = 100, minHeight = 10, maxHeight = 1000) {var arr1 = [],arr2 = [],imgMargin = 0, //图片边距height1 = 0, //第一组图片累计高度height2 = 0; //第二组图片累计高度// var getSystemInfo = await wx.getSystemInfo()for (let i = 0; i < arr.length; i++) {try {let heightData = await uni.getImageInfo({src: arr[i][attributeName]});let ImgHeight = heightData.length == 1 ? minHeight : heightData[1].height //如果长度等于1，就是图片有问题，这时候设置一个默认高度，如果长度等于2，下标1就有图片高度let imgWidth = heightData.length == 1 ? minHeight : heightData[1].width //如果长度等于1，就是图片有问题，let height = ImgHeight;if (height < minHeight) height = minHeight;if (height > maxHeight) height = maxHeight;if (height1 <= height2) {height1 += heightthis.firstList.push(arr[i])} else {height2 += heightthis.secondList.push(arr[i])}// console.log('arr2',height1,height2,arr1,arr2);} catch (err) {console.log('getImageInfo-err', err)}}},// 加载更多图片loadMoreImages: function() {console.log('加载更多图片', this.type)if (!this.last) {wx.showLoading({title: "加载中...",});this.getGoodthingList();}wx.hideLoading();},/** 预览图片 */// previewImg: function (e) {//   let index = e.currentTarget.dataset.index;//   let currentSrc = "";//   switch (e.currentTarget.dataset.type) {//     case "1"://       currentSrc = this.firstList[index].faceimg;//       break;//     case "2"://       currentSrc = this.secondList[index].faceimg;//   }//   wx.previewImage({//     urls: [currentSrc],//   });// },// 点赞giveLike(item, index, type) {if (this.like) {console.log(item);this.like = false;this.$request(this.$api.community.userToFabulous, {forum_id: item.id}).then((res) => {if (res.code === 0) {item.use_fabulous = !item.use_fabulous;item.fabulous_num = item.use_fabulous ? item.fabulous_num + 1 : item.fabulous_num - 1;item.fabulous_num = item.fabulous_num > 9999 ? parseFloat(item.fabulous_num / 10000).toFixed(1) + "万" : item.fabulous_num;if (type == 'firstList') {this.firstList[index] = item} else {this.secondList[index] = item}this.like = true;}});}},goDetails(item) {let navUrl = ''if (this.url == 'imgCommunity') {navUrl = "/pages/community/imgCommunity/SlideShowDetails?id=" + item.id;}this.$navTo.navigateTo({url: navUrl,})},},};
</script><style scoped lang="less">.page {width: 100%;}.main {width: 100%;background: #dce8fb;.view {width: 50%;display: inline-block !important;position: relative;vertical-align: top;padding: 6rpx;box-sizing: border-box;.content {border-radius: 4px;margin-bottom: 20rpx;box-sizing: border-box;background: white;.img-content {position: relative;.modle_mask {position: absolute;z-index: 9;color: #fff;left: 0;right: 0;top: 0;bottom: 0;background: rgba(0, 0, 0, 0.7);display: flex;justify-content: center;align-items: center;}.image {width: 100%;// height: 100%;border-top-right-radius: 4px;border-top-left-radius: 4px;box-sizing: border-box;}}.text {font-size: 26rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #333333;padding: 5px 8px 0 8px;}.price {font-size: 14px;color: #999999;padding: 5px 8px 5px 8px;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;.users {display: flex;align-items: center;.avatarUrl {width: 40rpx;height: 40rpx;border-radius: 20rpx;margin-right: 10rpx;}.nickName {min-width: 140rpx;max-width: 140rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}.give {display: flex;align-items: center;.giveXin {width: 20rpx;height: 20rpx;margin-right: 10rpx;}.giveNum {flex: 1;}}}}}}.modal_mask {box-sizing: border-box;position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;z-index: 1002;background: rgba(0, 0, 0, 0.6);.modaltips {position: absolute;left: 50%;top: 50%;width: 575rpx;padding: 20rpx;transform: translate(-50%, -50%);background: linear-gradient(180deg, #92ddf6 0%, #59b8ea 100%);border-radius: 20px;box-sizing: border-box;display: flex;justify-content: center;align-items: center;overflow: initial;.modalPages {width: 530rpx;background: #ffffff;border-radius: 10px;padding: 128rpx 24rpx 30rpx;box-sizing: border-box;.coverImage {position: absolute;left: 50%;top: -200rpx;transform: translate(-50%, 0);width: 276rpx;height: 292rpx;}.modelText1 {text-align: center;font-size: 36rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #59b8ea;margin-bottom: 20rpx;}.modelText2 {font-size: 28rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #666666;line-height: 40rpx;white-space: normal;margin-bottom: 10rpx;}.back {position: absolute;left: 50%;bottom: -30%;transform: translate(-50%, 0);width: 280rpx;height: 66rpx;background: #59b8ea;box-shadow: 0px 2rpx 10rpx 2rpx #6b6e6f;border-radius: 20rpx;font-size: 28rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #ffffff;text-align: center;line-height: 66rpx;}}}}.approveImg {position: absolute;right: 6rpx;bottom: -60rpx;width: 60rpx;height: 60rpx;}
</style>

uniapp实现瀑布流懒加载实现和无限上拉加载更多相关推荐

上拉加载 php,php+jquery 上拉加载
var resflow = true,pages =2; var ps=$("#ids").text(); order_code=$("#order_code" ...
uniapp 上拉加载更多完整实现源码
直接上代码 <template><view class="searchList"><Search></ ...
android verticalviewpager 下拉刷新上拉加载_设计规范 | 详解组件控件结构体系：加载类...
设计师在进行APP设计时,往往会更加专注于界面的布局.界面和界面之间怎么跳转.操作反馈,却往往忽略掉一个比较重要的环节,就是APP数据加载中的设计.那么我们怎么处理好界面交互中的加载设计,保证体验无缝 ...
Mui Webview下来刷新上拉加载实现
有些事情经历过之后才会发现,原来再次之前我是如此的啥,因为是第一次做,毫无头绪,有时会想假如有个一demo就好了,那么就不会花费这么多的无用功了.今天使用mui 的webview实现了一个H5页面的上 ...
Android项目：使用pulltorefresh开源项目扩展为下拉刷新上拉加载更多的处理方法，监听listview滚动方向...
很多android应用的下拉刷新都是使用的pulltorefresh这个开源项目,但是它的扩展性在下拉刷新同时又上拉加载更多时会有一定的局限性.查了很多地方,发现这个开源项目并不能很好的同时支持下拉刷 ...
mui用ajax上拉加载更多,mui上拉加载更多的使用
demo地址 mui框架中上拉加载的坑 1.在函数自己上拉加载行为后的回调函数 2.在mui封装的上拉加载中,点击某一项会失效. 解决方法 1.该函数是必须要写的,用来写自己的逻辑需求,但是一般情况下 ...
mescroll上拉加载的实现
html部分 <div id="mescroll" class="mescroll"> <ul class="recordl ...
使用MUI框架，模拟手机端的下拉刷新，上拉加载操作。
套用mui官方文档的一句话:"开发者只需关心业务逻辑,实现加载更多数据即可".真的是不错的框架. 想更多的了解这个框架:http://dev.dcloud.net.cn/mui/ ...
js上拉加载ajax数据,原生ajax写的上拉加载实例
上拉加载的思路 1 上拉加载是要把屏幕拉到最底部的时候触发ajax事件请求数据 2.所有要获取屏幕的高度文档的高度和滚动的高度下面的代码是已经做好了兼容的可以直接拿来用 Javascript: ...

uniapp实现瀑布流懒加载实现和无限上拉加载更多

uniapp实现瀑布流懒加载实现和无限上拉加载更多相关推荐

最新文章

热门文章