165 lines
4.4 KiB
Vue
165 lines
4.4 KiB
Vue
<template>
|
|
<scroll-view scroll-y @scrolltolower="scrollBottomEv" show-scrollbar="false" :style="{height: scrollHeight +'px'}">
|
|
<view class="disjbac fw pad-zy30">
|
|
<view @tap="goDetail(item.id)" class="width47 mar-s50 posir" v-for="(item,index) in dataList" :key="index">
|
|
<image :src="item.imgSrc" mode="aspectFill" style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
|
|
<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{item.title}}</view>
|
|
<view class="fon30 colpeili">￥{{item.price}}</view>
|
|
<view v-if="item.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
|
</view>
|
|
</view>
|
|
<!-- 暂无更多数据 -->
|
|
<pitera v-if="showpitera"></pitera>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
// 暂无更多组件
|
|
import pitera from '@/components/nothing/pitera.vue';
|
|
export default {
|
|
name:"list-two",
|
|
components:{
|
|
pitera
|
|
},
|
|
props:{
|
|
// 高度类型
|
|
scrollCate:{
|
|
type:Number,
|
|
default:1
|
|
},
|
|
// 页面来源
|
|
pageSource: {
|
|
type:Number,
|
|
default:1
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
scrollHeight:uni.getStorageSync('scrollHeight'),
|
|
// 数据
|
|
dataList:[
|
|
{
|
|
id:1,
|
|
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
price:'2,000',
|
|
isActivity:true,
|
|
},
|
|
{
|
|
id:1,
|
|
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
price:'2,000',
|
|
isActivity:false,
|
|
},
|
|
{
|
|
id:1,
|
|
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
price:'2,000',
|
|
isActivity:false,
|
|
},
|
|
{
|
|
id:1,
|
|
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
price:'2,000',
|
|
isActivity:false,
|
|
},
|
|
{
|
|
id:1,
|
|
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
price:'2,000',
|
|
isActivity:false,
|
|
},
|
|
{
|
|
id:1,
|
|
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
price:'2,000',
|
|
isActivity:false,
|
|
},
|
|
{
|
|
id:1,
|
|
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
price:'2,000',
|
|
isActivity:false,
|
|
},
|
|
{
|
|
id:1,
|
|
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
price:'2,000',
|
|
isActivity:false,
|
|
},
|
|
{
|
|
id:1,
|
|
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
price:'2,000',
|
|
isActivity:false,
|
|
}
|
|
],
|
|
page:1, // 第几页
|
|
size:10, // 数量
|
|
total:0, // 总数
|
|
showpitera:true, // 是否显示暂无数据
|
|
};
|
|
},
|
|
mounted() {
|
|
switch (this.scrollCate){
|
|
case 1:
|
|
this.scrollHeight = uni.getStorageSync('scrollHeight-one'); // App.vue缓存的数据
|
|
break;
|
|
case 2:
|
|
this.scrollHeight = uni.getStorageSync('scrollHeight-two'); // App.vue缓存的数据
|
|
break;
|
|
case 3:
|
|
this.scrollHeight = uni.getStorageSync('scrollHeight-three'); // App.vue缓存的数据
|
|
break;
|
|
case 4:
|
|
this.scrollHeight = uni.getStorageSync('scrollHeight-four'); // App.vue缓存的数据
|
|
break;
|
|
}
|
|
switch (this.pageSource){
|
|
case 1:
|
|
this.checkList();
|
|
break;
|
|
}
|
|
},
|
|
methods:{
|
|
checkList(){
|
|
this.log('列表事件')
|
|
},
|
|
// 视图容器触底事件
|
|
scrollBottomEv(){
|
|
this.log('触底了',55)
|
|
// 判断总数是否等于数组长度，如果相等显示暂无更多，否则继续执行列表事件
|
|
if(this.total!=this.dataList.length){
|
|
// 页数每次+1
|
|
this.page++
|
|
switch (this.pageSource){
|
|
case 1:
|
|
// this.checkList();// 调用列表事件
|
|
break;
|
|
}
|
|
} else {
|
|
// 显示暂无数据
|
|
this.pitera = true;
|
|
}
|
|
},
|
|
goDetail(id){//前往详情页
|
|
uni.navigateTo({
|
|
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.activity-img{background: url(/static/public/icon-time-limit.png) no-repeat;background-size: 100% 100%;top: 10rpx;right: 10rpx;}
|
|
</style>
|