小程序图片懒加载

Page({

data:{

// text:"这是一个页面"

hidden: false,

//搜索名称

searchName: null,

//pageindex

pageIdx: 1,

//产品列表

productArr:[],

clientHeight:0,

arr:[],

arrHight:[]

},

onLoad:function(options){

var that = this;

wx.getSystemInfo({

success: function(res) {

that.setData({

clientHeight: res.windowHeight

});

}

})

// 页面初始化 options为页面跳转所带来的参数

console.log(options)

var that = this

var searchName = options.searchName

console.log(searchName)

that.setData({

searchName:searchName

})

var params = {}

params["page_index"] = 1

params["page_size"] = 14

params["keyword"] = "1.State"

console.log(params["keyword"])

wx.request({

url: 'https://api.getweapp.com/vendor/lightstao/product/search',

method: 'GET',

data: {

search_param: JSON.stringify(params),

y: ''

},

header: {

'Content-Type': 'application/json'

},

success: function(res) {

console.log("res",res.data)

that.setData({

hidden: true

})

var arr = [];

var length = Array.from(res.data.data.products).length;

var isD = length % 2 == 0 ? true : false ;

var arrHight = [];

for(var i = 0; i < length ; i++){

arr[i] = false;

arrHight[i] = Math.floor(i/2)*(320/750)*520;

}

that.setData({

arr: arr,

productArr: Array.from(res.data.data.products),

arrHight:arrHight

})

console.log(that.data.arr)

}

})

},

scroll: function(e){

var seeHeight = this.data.clientHeight; //可见区域高度

var arrHight = this.data.arrHight;

var event = e;

var scrollTop = event.detail.scrollTop;

var arr = this.data.arr;

console.log(scrollTop)

for (var i = 0; i < this.data.productArr.length; i++) {

if (arrHight[i] < scrollTop) {

if (arr[i] == false) {

arr[i] = true;

// arr[i*2] arr[i*2+1]

}

//n = i + 1;

}

//arr[i] = true;

}

this.setData({

arr : arr

})

}

})

<view class="body-view">

<loading hidden="{{hidden}}" bindchange="loadingChange">

加载中...

</loading>

</view>

<view class="container_wrap">

<scroll-view bindscroll="scroll" style="height:{{clientHeight}}px;" class="container_wrap" scroll-y="true">

<view class="listview">

<view class="thumbnail" wx:for="{{productArr}}" wx:key="productlist" style="{{arr[index] ?'background:none;background-color:#fff': ''}}">

<image class="product_image {{arr[index] ? 'loaded':''}}" mode="aspectFit" src="{{arr[index] ? productArr[index].Image : ''}}"></image>

<text class="label_title">{{productArr[index].Title}}</text>

<text class="label_price">¥{{productArr[index].RmbPrice}}</text>

<view class="country_view">

<image class="img_country" mode="scaleToFill" src="{{productArr[index].CountryImage}}"></image>

<text class="country_name">{{productArr[index].BusinessName}}</text>

</view>

</view>

</view>

</scroll-view>

</view>

.container_wrap{

height: 100%;

background-color: #f5f5f5;

}

.container_wrap .listview{

display: flex;

flex-direction: row;

flex-wrap:wrap;

width: 100%;

height: 200%;

justify-content: space-around;

box-sizing: border-box;

background-color: #f5f5f5;

padding-top: 20rpx;

padding-bottom: 20rpx;

}

.thumbnail {

width: 330rpx;

height: 520rpx;

margin: 10rpx 0;

border-radius: 2%;

background: url('../../images/lazyload.jpg') no-repeat top center;

background-size: 100% 70%;

}

.product_image{

opacity: 0;

width: 100%;

height: 70%;

transition: opacity 1s linear 2s;

}

.loaded{

opacity: 1;

}

.label_title {

height: 55rpx;

font-size: 70%;

color: #333333;

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

padding-top: 5rpx;

padding-left: 10rpx;

}

.label_price {

font-size: 70%;

color: #ef3b51;

padding-left: 10rpx;

}

.img_country {

width: 30rpx;

height: 20rpx;

padding-left: 10rpx;

transition: all 2s;

}

.country_view {

width: 100%;

height: 20rpx;

flex-direction: row;

}

.country_name {

font-size: 60%;

font-style: normal;

padding-left: 10rpx;

color: #666666;

}