위 챗 애플 릿 - 폭포 흐름 로드
26753 단어 전단 위 챗 애플 릿
1、.xml
<view class='collect-out'>
<view style='display:none'>
<image wx:for="{{list}}" wx:key="" id="{{item.id}}" src="{{imgHttp+item.cover_img}}" bindload="onImageLoad" mode="widthFix" class="collecting-img shadow-bottom" lazy-load="true">image>
view>
view>
<view class='space-between'>
<view class="collect-out" style='float:left' wx:if="{{col1.length}}">
<block wx:for="{{col1}}" wx:key="" wx:for-index="idx" wx:for-item="item">
<view class="collecting user-shadow" bindtap='informDetailtap' id="{{item.id}}">
<image lazy-load="true" class="collecting-img shadow-bottom fade_in" src="{{imgHttp+item.cover_img}}" mode="widthFix">
<image lazy-load="true" id='{{item.id}}' data-is='is_collection' class="collect-img fade_in" src="{{imgSrc}}index/collect_{{item.is_collection?'1':'0'}}.png" mode="widthFix" catchtap='collectTap'>image>
image>
<text class="collecting-name">{{item.name}}text>
<view class="space-between">
<view class="price">
<text class="price-cost">{{item.rent}}text>
<text class="price-unit"> text>
view>
<view class="date">{{item.published_date}}view>
view>
view>
block>
view>
<view class="collect-out" style='float:left' wx:if="{{col2.length}}">
<block wx:for="{{col2}}" wx:key="" wx:for-index="idx" wx:for-item="item">
<view class="collecting user-shadow" bindtap='informDetailtap' id="{{item.id}}">
<image lazy-load='true' class="collecting-img shadow-bottom fade_in" src="{{imgHttp+item.cover_img}}" mode="widthFix">
<image id='{{item.id}}' class="collect-img fade_in" src="{{imgSrc}}index/collect_{{item.is_collection?'1':'0'}}.png" mode="widthFix" catchtap='collectTap'>image>
image>
<text class="collecting-name">{{item.name}}text>
<view class="collecting-tag">
<view class="price">
<text class="price-cost">{{item.rent}}text>
<text class="price-unit"> text>
view>
<view class="date">{{item.published_date}}view>
view>
view>
block>
view>
view>
2.wxss
.collecting-img{
width: 100%;
position: relative;
}
.collect-img{
position: absolute;
bottom: 20rpx;
right: 16rpx;
width: 76rpx;
}
.collecting-name {
font-size: 26rpx;
font-weight: bold;
margin: 20rpx 0 15rpx;
}
.collecting-tag {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
-webkit-flex-direction: row;
-ms-flex-direction: row;
color: #9b9b9b;
font-size: 18rpx;
display: flex;
flex-direction: row;
margin-top: 9rpx;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.tag text {
border: 1rpx solid #F1F1F1;
margin-right: 4rpx;
padding: 0 9rpx;
height: 24rpx;
line-height: 24rpx;
display: inline-block;
}
.collecting {
padding: 10rpx 10rpx 20rpx;
width: 100%;
box-sizing: border-box;
position: relative;
margin-bottom: 20rpx;
}
.collect-out {
/* width: 100%; */
width: 49%;
margin-top: 20rpx;
column-width: 330rpx;
column-gap: 20rpx;
}
.collect-out:after {
content: '';
width: 0;
height: 0;
display: block;
clear: both;
}
.price-cost{
font-size: 26rpx;
}
.price-unit{
font-size: 18rpx;
}
.price-cost,.price-unit{
color: #fb4040;
}
3.js
let col1H = 0
let col2H = 0
Page({
data: {
imgSrc: app.globalData.imgSrc,
imgHttp: app.globalData.imgHttp,
animationData: {},
col1: [],
col2: [],
images: [],
},
onLoad: function () {
//
wx.request({
url: request_getGoodsList,
data: {
"session3rd": userid,
"type": 1,
"cat_ids": menunav,
"labels": menulist,
"page": page,
"pageSize": pageSize
},
success: function (res) {
if (res.data.code == -2) {
that.setData({
list: []
})
}
if (res.data.code == 1) {
var list = res.data.list
that.setData({
list: list,
})
}
}
})
}
,
//
onImageLoad: function (e) {
let imageId = e.currentTarget.id;
let oImgW = e.detail.width; //
let oImgH = e.detail.height; //
let imgWidth = 155.5; //
let scale = imgWidth / oImgW; //
let imgHeight = oImgH * scale; //
let imageObj = null;
let images = this.data.list;
for (let i = 0; i < images.length; i++) {
let img = images[i];
if (img.id === imageId) {
imageObj = img;
break;
}
}
let loadingCount = this.data.loadingCount - 1;
let col1 = this.data.col1;
let col2 = this.data.col2;
if (col1H <= col2H) {
col1H += imgHeight;
col1.push(imageObj);
} else {
col2H += imgHeight;
col2.push(imageObj);
}
let data = {
loadingCount: loadingCount,
col1: col1,
col2: col2
};
if (!loadingCount) {
data.images = [];
}
this.setData(data);
},
})
Tips: 작은 프로그램 은 폭포 흐름 로 딩 이 필요 합 니 다. 본 사이트 에서 찾 습 니 다.