uniapp小程序长列表组件封装

最新推荐文章于 2024-09-08 10:47:00 发布

前端技术负责人

最新推荐文章于 2024-09-08 10:47:00 发布

阅读量2.2k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43837268/article/details/107511982

版权

vue 专栏收录该内容

192 篇文章 4 订阅

订阅专栏

1.goods-list.vue

<template>
	<view class="goods_list">
		<view class="goods_item" v-for="(item, index) in goods" :key="index" @click="navigate(item.tid)">
			<image src="https://img14.360buyimg.com/mobilecms/s372x372_jfs/t1/100540/39/16145/157322/5e77599aE151edba7/9f71224e351687fa.jpg!q70.dpg.webp" mode=""></image>
			<view class="price">
				<text>{{ item.pid }}</text>
				<text>{{ item.tid }}</text>
			</view>
			<view class="name">{{ item.title }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: ['goods'],
	methods: {
		navigate(id){
			this.$emit('goodsItemClick',id);
		}
	}
};
</script>

<style lang="scss">
.goods_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.goods_item {
			background: #fff;
			width: 355rpx;
			margin: 10rpx 0;
			padding: 15rpx;
			box-sizing: border-box;
			image{
				width: 80%;
				height: 150px;
				display: block;
				margin: auto;
			}
			.price{
				color: $shop-color;
				font-size: 36rpx;
				margin: 20rpx 0 5rpx 0;
				text:nth-child(2){
					color: #ccc;
					font-size: 28rpx;
					margin-left: 17rpx;
					text-decoration: line-through;
				}
			}
			
			.name {
				font-size: 28rpx;
				line-height: 50rpx;
				padding-bottom: 15rpx;
				padding-top: 10rpx;
			}
		}
	}
</style>

2.use.vue

<goods-list @goodsItemClick="goGoodsDetail" :goods="goods"></goods-list>
<script>
	import goodsList from '../../components/goods-list/goods-list.vue'
	export default {
		data() {
			return {
				
				goods:[],
				
			}
		},
		
		components:{
			'goods-list':goodsList
		},
		methods: {
			
			// 导航到商品详情页
			goGoodsDetail(tid){
				uni.navigateTo({
					url:'/pages/goods-detail/goods-detail?tid='+tid
				})
			}
		}
	}
</script>