![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7af4356070f5e99e28e99d9788cc69f7.png)
html
<view class="u-f wrap itembox">
<view class="imgitem" v-for="(item,i) in list" :key="i" @click.stop="chooseFun(item)">
<view class="u-rela" @click.stop="previewFun(item)">
<image
:src="(item.show ? item.img+'?x-oss-process=video/snapshot,t_0,f_jpg' : '')"
mode="aspectFill" class="img"></image>
<image src="@/static/img/stop.png" mode="" class="stopimg"></image>
</view>
<view class="text u-flex">
<image src="@/static/img/c1.png" mode="" class="u-w-40 u-h-40 u-m-r-4" v-if="item.choose"></image>
<image src="@/static/img/c.png" mode="" class="u-w-40 u-h-40 u-m-r-4" v-else></image>
<text :class="item.choose ? 'u-color-163' :'u-color-777'">{{item.choose ? '已选' :'未选'}} </text>
</view>
</view>
</view>
js
onPageScroll() {
uni.$u.throttle(this.showImg, 0,true)
},
onReady() {
let that = this
uni.getSystemInfo({
success(res) {
that.windowHeight = res.windowHeight;
}
});
},
methods: {
showImg() {
let that = this
uni.createSelectorQuery().selectAll('.imgitem').boundingClientRect((ret) => {
ret.forEach((item, index) => {
if (item.top <= that.windowHeight) {
that.$set(that.list[index], 'show', true)
}
})
}).exec();
},
getlist(){
this.list.push({
choose: false,
img: item,
show: index<9?true:false
})
}
}
部分css
.itembox {
margin: 0 16rpx 0 32rpx;
padding-bottom: 300rpx;
.imgitem {
border-radius: 8rpx;
margin-top: 24rpx;
font-size: 28rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(131, 149, 193, 0.24);
margin-right: 16rpx;
.img {
width: 218rpx;
height: 300rpx;
border-radius: 8rpx 8rpx 0rpx 0rpx;
}
.text {
padding: 16rpx 8rpx 24rpx;
}
}
}