小程序图片懒加载
其他
2018-12-14 22:33:32
阅读次数: 0
onLoad:function(options){ |
clientHeight: res.windowHeight |
// 页面初始化 options为页面跳转所带来的参数 |
var searchName = options.searchName |
params["keyword"] = "1.State" |
console.log(params["keyword"]) |
url: 'https://api.getweapp.com/vendor/lightstao/product/search', |
search_param: JSON.stringify(params), |
'Content-Type': 'application/json' |
console.log("res",res.data) |
var length = Array.from(res.data.data.products).length; |
var isD = length % 2 == 0 ? true : false ; |
for(var i = 0; i < length ; i++){ |
arrHight[i] = Math.floor(i/2)*(320/750)*520; |
productArr: Array.from(res.data.data.products), |
console.log(that.data.arr) |
var seeHeight = this.data.clientHeight; //可见区域高度 |
var arrHight = this.data.arrHight; |
var scrollTop = event.detail.scrollTop; |
for (var i = 0; i < this.data.productArr.length; i++) { |
if (arrHight[i] < scrollTop) { |
})
<loading hidden="{{hidden}}" bindchange="loadingChange"> |
<view class="container_wrap"> |
<scroll-view bindscroll="scroll" style="height:{{clientHeight}}px;" class="container_wrap" scroll-y="true"> |
<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>
background-color: #f5f5f5; |
.container_wrap .listview{ |
justify-content: space-around; |
background-color: #f5f5f5; |
background: url('../../images/lazyload.jpg') no-repeat top center; |
background-size: 100% 70%; |
transition: opacity 1s linear 2s; |
-webkit-box-orient: vertical; |
}
转载自blog.csdn.net/weixin_42593599/article/details/82772283