You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
254 lines
7.6 KiB
254 lines
7.6 KiB
<template>
|
|
<view class="wrap">
|
|
<view class="item-warp">
|
|
<view class="item" v-for="(item, index) in list" :key="index">
|
|
<u-lazy-load threshold="-450" height="400" img-mode="aspectFill" border-radius="10" :image="item.src" :index="index" @statusChange="statusChange" @clickImg="clickImg"></u-lazy-load>
|
|
</view>
|
|
</view>
|
|
<u-loadmore :status="status" @loadmore="getData"></u-loadmore>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [],
|
|
status: 'loadmore',
|
|
data: [{
|
|
src: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
// 这里会加载失败，显示错误的占位图
|
|
src: "error.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i6/TB1SIYrLXXXXXaAXpXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i1/TB11yxeNVXXXXbwXFXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i3/TB1ndJiQFXXXXctaXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i4/TB1BYGDLpXXXXbuXXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i2/TB1_9GoMVXXXXXmaXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i2/TB1cSZZNFXXXXaKaXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
// 这里会加载失败，显示错误的占位图
|
|
src: "error.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i8/TB1RVS_QpXXXXXBXXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i5/TB1xEJiLXXXXXcxaXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i6/TB1DSuHJVXXXXXmXXXXwu0bFXXX.png_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i5/TB1aMNyLpXXXXa2XXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i8/TB1JRHEQpXXXXXwXVXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i7/TB1qKEuQpXXXXXYXXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i7/TB1TlOfQFXXXXX2XXXXwu0bFXXX.png_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i1/TB1SKu.QpXXXXbDXVXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
// 这里会加载失败，显示错误的占位图
|
|
src: "error.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i8/TB1um5GQpXXXXbiaXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i1/TB1pxCTQpXXXXa2apXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i6/TB1zksMNVXXXXaRapXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i4/TB1nbrcOXXXXXXEXpXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i4/TB1CI_NQpXXXXXaXVXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i2/TB18vTdQFXXXXXlXpXXwu0bFXXX.png_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i7/TB1doDVQpXXXXcRaXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i1/TB17LgBNFXXXXaSXVXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i6/TB1fVJJQFXXXXcyXpXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i3/TB1wnBTKFXXXXcQXXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i1/TB1DX3hIpXXXXXIaXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i6/TB1SIYrLXXXXXaAXpXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i1/TB11yxeNVXXXXbwXFXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i3/TB1ndJiQFXXXXctaXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i4/TB1BYGDLpXXXXbuXXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i2/TB1_9GoMVXXXXXmaXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i2/TB1cSZZNFXXXXaKaXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
// 这里会加载失败，显示错误的占位图
|
|
src: "error.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i8/TB1RVS_QpXXXXXBXXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i5/TB1xEJiLXXXXXcxaXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i6/TB1DSuHJVXXXXXmXXXXwu0bFXXX.png_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i5/TB1aMNyLpXXXXa2XXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i8/TB1JRHEQpXXXXXwXVXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i7/TB1qKEuQpXXXXXYXXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i7/TB1TlOfQFXXXXX2XXXXwu0bFXXX.png_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i1/TB1SKu.QpXXXXbDXVXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i2/TB17gJ3OXXXXXcrXpXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i8/TB1um5GQpXXXXbiaXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i1/TB1pxCTQpXXXXa2apXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i6/TB1zksMNVXXXXaRapXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i4/TB1nbrcOXXXXXXEXpXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i4/TB1CI_NQpXXXXXaXVXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i2/TB18vTdQFXXXXXlXpXXwu0bFXXX.png_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i7/TB1doDVQpXXXXcRaXXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
src: "https://gtd.alicdn.com/sns_logo/i1/TB17LgBNFXXXXaSXVXXSutbFXXX.jpg_240x240xz.jpg",
|
|
},
|
|
{
|
|
// 这里会加载失败，显示错误的占位图
|
|
src: "error.jpg",
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getData();
|
|
},
|
|
onReachBottom() {
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
statusChange(status) {
|
|
//console.log(status);
|
|
},
|
|
clickImg(img) {
|
|
//console.log(img);
|
|
},
|
|
getData() {
|
|
let index = 0;
|
|
this.status = 'loading';
|
|
setTimeout(() => {
|
|
for(let i = 0; i < 10; i++) {
|
|
index = this.$u.random(0, this.data.length - 1);
|
|
this.list.push({
|
|
src: this.data[index].src
|
|
})
|
|
}
|
|
this.status = 'loadmore';
|
|
}, 1500);
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wrap {
|
|
padding: 30rpx;
|
|
display: block;
|
|
|
|
}
|
|
|
|
.item-warp {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.item-warp .item {
|
|
flex: 0 0 335rpx;
|
|
height: 400rpx;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|