uniapp中商品卡片流组件传值

uniapp中商品卡片流组件传值上图中可以看出所展示的商品简略详情，主要要解决的问题是商品展示时类别展示，当点击更多时会跳转到搜索页面并展现相关的商品类别数据，在页面传值过程中我将title值和绑定的id值传给跳转的页面；navigation(e) {console.log(e);this.navigation_name = e.currentTarget.dataset.inner;this.n

老古懂

775人浏览 · 2021-04-08 17:49:58

老古懂 · 2021-04-08 17:49:58 发布

uniapp中商品卡片流组件传值
效果展示1
上图中可以看出所展示的商品简略详情，主要要解决的问题是商品展示时类别展示，当点击更多时会跳转到搜索页面并展现相关的商品类别数据，在页面传值过程中我将title值和绑定的id值传给跳转的页面；

navigation(e) {
				console.log(e);
				this.navigation_name = e.currentTarget.dataset.inner;
				this.navigation_id = e.currentTarget.dataset.navigationid;
				uni.navigateTo({
					// url: '/pages/columnGoods/HotNewGoods/index?navigation_name=' + JSON.stringify(this.navigation_name)
					url: '/pages/columnGoods/HotNewGoods/index?navigation_name='+this.navigation_name+'&category_id='+this.navigation_id
				})
			},

在上面代码中实现点击获取点击信息，其中通过使用v-data属性绑定了inner内容和类别id值，
页面中搜索框、商品展示、快捷购物车等功能都是有组件构成，旨在复用性和结构清晰；
对于传值过来的属性值在onLoad里用页面里定义好的字段接收，
跳转展示页2

onLoad(option) {
			this.getIndexData();
			this.navigation_id = option.category_id;
			this.navigation_name = option.navigation_name;
			
			this.getProductList();
		},

<view class="goodsshow">
			<goodshow :goods="goods"></goodshow>
		</view>

goodshow为商品展示卡片组件的命名，为其直接传一个数组，包含接口获取到的data值，
get到数据的请求中需要传送由刚刚主页传送过来的商品类别id值，由此获取到不同的数据流用以展示；

getProductList: function() {
				let that = this;
				let data = {
					page: 1,
					token: 'a23f34d1c52dcff6d385825cd6c737a7',
					category_id:that.navigation_id,
				}
				getProductslist(data).then(res => {
					let bastList = res.data;
					console.log(res.data);
					that.goods = res.data.data;
					that.loadTitle = loadend ? "😕人家是有底线的~~" : "加载更多";
					that.page = that.page + 1;
				}).catch(err => {
					that.loading = false,
					that.loadTitle = '加载更多'
				});
			},

getProductslist函数为请求的接口函数，相对应的路径这里不做暴露，具体传参和处理已经可以清晰看到；
对于商品卡片流组件的详解：
商品展示1
采用flex布局，对于good_name过长则使用overflow样式进行限制，其他亦没有难点，关键的一点在于商品描述，图中可以看到对于商品的描述采用的分段式，并且在中间有竖线隔开，针对这点在商品详情中也遇到了这一点，这里分享我的解决方法仅供参考；

<view class="flex-item">
	<view class="tags " v-for="(tagItem ,index) in itemn.tags" :key="index" v-if="index<2" >
		<view class="line_" v-if="index!=0"></view>
		<view class="tag">{{tagItem}}</view>
	</view>
</view>

对于首页接口获取到的商品描述数据因为返回的时数组字符串，所以我直接将其执行遍历使用v-if限制其展示前两个字符串，在竖线的标签中对其增加判断条件，当是第一个字符串时不添加竖线，从第二个开始前面添加竖线，用以隔开描述的字符串；

that.goods_point = res.data.selling_point;
that.goods_point = that.goods_point.split( '，' );

而对于详情页的商品描述因为返回的时text文本，而不是像之前的数组字符串，所以先对其进行split分割，然后赋给数组，而后就可以对其执行像首页一样的操作；

<view class="flex-item">
	<view class="tags " v-for="(tagItem ,index) in goods_point" :key="index" v-if="index<2" >
		<view class="line_" v-if="index!=0"></view>
		<view class="tag">{{tagItem}}</view>
	</view>
</view>