小程式圖片懶載入
阿新 • • 發佈:2018-12-14
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; |
}