mall-applet1/components/list/list-one.vue

<template>
	<view>
		<view class="fon36 colb bold mar-x40" v-if="ifTitle">{{title}}</view>
		<view class="disjbac fw">
			<view class="width48_5 fon30 mar-x30" @tap="goDetail(index)" v-for="(item,index) in dataList" :key="index">
				<view class="" style="height: 342rpx;">
					<image class="radius30 width100" :src="item.imgsrc" mode="aspectFill" style="height: 342rpx;"></image>
				</view>
				<view class="pad-zy20">
					<view class="line-h50 mar-sx25 clips2" style="height: 90rpx;">{{item.title}}</view>
					<view class="textc disjbac">
						<view class="">￥{{item.price}}</view>
						<i @tap.stop="addCartEv(index)" class="icon icon-shop-cart" style="font-size: 40rpx;"></i>
					</view>
				</view>
			</view>
		</view>
		<view class="mar-s60" v-if="total==dataList.length">
			<pitera textStr="—— 到底啦 ——"></pitera>
		</view>
		<view class="loading-box mar-s60" v-show="ifLoading">
		    <view class="loader-16"></view>
		</view>
	</view>
</template>

<script>
	import pitera from '@/components/nothing/pitera';
	export default {
		name:"list-one",
		components:{
			pitera
		},
		props:{
			// 是否显示标题
			ifTitle:{
				type:Boolean,
				default:false
			},
			// 标题内容
			title:{
				type:String,
				default:'热门推荐'
			}
		},
		data() {
			return {
				dataList:[
					{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖入海盐太妃糖入海盐太妃糖入海盐太妃糖入海盐太妃糖',price:'2,000'},
					{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
					{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
					{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
					{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
					{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
					{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
					{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
					{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
					{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
					{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
				],
				ifLoading:false,
				total:0
			};
		},
		methods:{
			moreEv() {
				this.ifLoading = true;
				setTimeout(()=>{
					this.total = this.dataList.length;
					this.ifLoading = false;
					console.log(this.total);
				},2000)
				console.log('触底了');
			},
			// 加入购物车
			addCartEv(id) {
				this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)')
			},
			// 去详情
			goDetail(id) {
				uni.navigateTo({
					url:'/pagesB/shop-detail/shop-detail'
				})
			}
		}
	}
</script>

<style>

</style>