uniapp 电商小程序商品双向联动列表使用详细功能介绍

╰+哭是因爲堅強的太久メ 2021-07-25 15:15 1364阅读 0赞

# 商品双向联动列表的使用 #

电商app中，商品双向联动列表是非常常见的。

类似于这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
dcloud插件市场是有现成的插件的，是黄河爱浪同学写的。。。

[商品双向联动列表插件 地址：https://ext.dcloud.net.cn/plugin?id=707][_https_ext.dcloud.net.cn_plugin_id_707]

目前我没有详细调整样式，因为UI图还在修改中，最终实现的效果不是很好看，但是基本功能都是有的：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

接口的数据是前端模拟的，后续会根据接口自行调整数据。

另外如果某个商品选择数量时，如果有不同的规格，则需要在底部弹窗进行规格的展示，然后选择规格后再加入购物车。这个目前还没有处理。后续会完善。

代码如下：

<view class="swiperCon">
    	<view class="scroll-panel" id="scroll-panel">
    		<view class="list-box">
    			<view class="left">
    				<scroll-view scroll-y="true" 
    				:style="{ 'height':scrollHeight+'px' }"
    				:scroll-into-view="leftIntoView"
    				:scroll-with-animation="true"
    				>
    					<view class="item" 
    						v-for="(item,index) in leftArray"
    						:key="index" 
    						:class="{ 'active':index==leftIndex }" 
    						:id="'left-'+index"
    						:data-index="index"
    						@tap="leftTap"
    					>{ { item}}</view>
    		        </scroll-view>
    			</view>
    			<view class="main">
    				<view class="mainCate">
    					<scroll-view scroll-x class="nav z" scroll-with-animation :scroll-left="mainCateScrollLeft">
    						<text class="cu-item" v-for="(item,index) in goodsCate" :key="index" :class="mainCateIndex==index?'select':''" @click="toSelectCate(item,index,$event)">
    							{ { item}}
    						</text>
    					</scroll-view>
    				</view>
    				<swiper class="swiper" :style="{ 'height':scrollHeight - 20 +'px'}"
    					:current="leftIndex" @change="panelSwiperChange"
    					 vertical="true" duration="300">
    					<swiper-item v-for="(item,index) in mainArray" :key="index">
    						<scroll-view  scroll-y="true" :style="{ 'height':scrollHeight - 20 +'px' }">
    							<view class="item">
    								<view class="title">
    									<view>{ { item.title}}</view>
    								</view>
    								<view class="goods" v-for="(item2,index2) in item.list" :key="index2" @click="toDetail(item2)">
    									<image src="/static/logo.png" mode=""></image>
    									<view class="goods-right">
    										<view>第{ { index2+1}}个商品标题</view>
    										<view class="describe">第{ { index2+1}}个商品的描述内容</view>
    										<view class="money" style="position: relative;" @click.stop>
    											<text>第{ { index2+1}}个价格</text>
    											<uni-number-box 
    												class="step"
    												:min="1"
    												style="position: absolute;right:40upx;"
    												:max="item2.stock || 1000"
    												:value="item2.number>item2.stock?item2.stock:item2.number"
    												:isMax="item2.number>=item2.stock?true:false"
    												:isMin="item2.number===1"
    												:disabled="true"
    												:index="index2"
    												@eventChange="numberChange"
    											></uni-number-box>
    										</view>
    									</view>
    								</view>
    							</view>
    						</scroll-view>
    					</swiper-item>
    				</swiper>
    			</view>
    		</view>
    	</view> 
    </view>

script部分代码：

import uniNumberBox from '@/components/uni-number-box.vue'   // 加减数字组件
    export default { 
    	data() { 
    		return { 
    			scrollHeight:400,
    			leftArray:[],
    			mainArray:[],
    			leftIndex:0,
    			goodsCate:[],
    			mainCateIndex:0,
    			mainCateScrollLeft:0
    		}
    	},
    	components:{ uniNumberBox},
    	computed: { 
    		leftIntoView(){ 
    			return `left-${ this.leftIndex > 5 ? (this.leftIndex-5):0}`;
    		}
    	},
    	mounted(){ 
    		/* 等待DOM挂载完成 */
    		this.$nextTick(()=>{ 
    			/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
    			setTimeout(()=>{ 
    				/* 等待滚动区域初始化完成 */
    				this.initScrollView().then(()=>{ 
    					/* 获取列表数据，你的代码从此处开始 */
    					this.getListData();
    				})
    			},200);
    		})
    	},
    	onLoad(){ 
    		this.goodsCate = ["薯片","巧克力","薯片","巧克力","薯片","巧克力","薯片","巧克力"];
    	},
    	methods:{ 
    		// scroll-view 实现 横线标签的滑动展示
    		toSelectCate(item, index, e) { 
    				this.mainCateIndex = index;
    				this.mainCateScrollLeft = (index - 1) * 60;
    			},
    			// 数字组件改变数字
    			numberChange(data){ 
    				console.log(data.number);
    			},
    			/* 初始化滚动区域 */
    			initScrollView(){ 
    				return new Promise((resolve, reject)=>{ 
    					let view = uni.createSelectorQuery().select('#scroll-panel');
    					view.boundingClientRect(res => { 
    						this.scrollHeight = res.height;
    						this.$nextTick(()=>{ 
    							resolve();
    						})
    					}).exec();
    				});
    			},
    			/* 获取列表数据 */   // 此处可以通过自己的接口进行数据覆盖
    			getListData(){ 
    				// Promise 为 ES6 新增的API ，有疑问的请自行学习该方法的使用。
    				new Promise((resolve,reject)=>{ 
    					/* 因无真实数据，当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
    					uni.showLoading();
    					setTimeout(()=>{ 
    						/* 因无真实数据，当前方法模拟数据 */
    						let [left,main]=[[],[]];
    						
    						for(let i=0;i<25;i++){ 
    							left.push(`${ i+1}类商品`);
    							
    							let list=[];
    							let max = Math.floor(Math.random()*15) || 8;
    							for(let j=0;j<max;j++){ 
    								list.push(j);
    							}
    							main.push({ 
    								title:`第${ i+1}类商品标题`,
    								list
    							})
    						}
    						
    						// 将请求接口返回的数据传递给 Promise 对象的 then 函数。
    						resolve({ left,main});
    					},1000);
    				}).then((res)=>{ 
    					console.log('-----------请求接口返回数据示例-------------');
    					console.log(res);
    					
    					uni.hideLoading();
    					this.leftArray=res.left;
    					this.mainArray=res.main;
    				});
    			},
    			/* 左侧导航点击 */
    			leftTap(e){ 
    				let index=e.currentTarget.dataset.index;
    				this.leftIndex=Number(index);
    			},
    			/* 轮播图切换 */
    			panelSwiperChange(e){ 
    				let index=e.detail.current;
    				this.leftIndex=Number(index);
    			},
    	}

css样式部分：

.swiperCon{ 
    	height: 100%;
    	display: flex;
    	margin-bottom:40upx;
    	flex-direction: column;
    	flex-wrap: nowrap;
    	justify-content: flex-start;
    	align-items: flex-start;
    	align-content: flex-start;
    	
    	&>view{ 
    		width: 100%;
    	}
    	
    	.scroll-panel{ 
    		flex-grow: 1;
    		height: 0;
    		overflow: hidden;
    		.list-box{ 
    			display: flex;
    		    flex-direction: row;
    		    flex-wrap: nowrap;
    		    justify-content: flex-start;
    		    align-items: flex-start;
    		    align-content: flex-start;
    			font-size: 28rpx;
    			
    			.left{ 
    				width: 200rpx;
    				background-color: #f6f6f6;
    				line-height: 80rpx;
    				box-sizing: border-box;
    				font-size: 32rpx;
    				
    				.item{ 
    					padding-left: 20rpx;
    					position: relative;
    					&:not(:first-child) { 
    						margin-top: 1px;
    					
    						&::after { 
    							content: '';
    							display: block;
    							height: 0;
    							border-top: #d6d6d6 solid 1px;
    							width: 620upx;
    							position: absolute;
    							top: -1px;
    							right: 0;
    							transform:scaleY(0.5);	/* 1px像素 */
    						}
    					}
    					
    					&.active,&:active{ 
    						color: #42b983;
    						background-color: #fff;
    					}
    				}
    			}
    			.main{ 
    				background-color: #fff;
    				padding-left: 20rpx;
    				width: 0;
    				flex-grow: 1;
    				box-sizing: border-box;
    				.mainCate{ 
    					display: flex;
    					.nav{ 
    						display: flex;
    						white-space: nowrap;
    						border:1px solid red;
    						.cu-item{ 
    							padding:6upx 10upx;
    							&.select{ 
    								background:red;
    								color:#fff;
    							}
    						}
    					}
    				}
    				.swiper{ 
    					height: 500px;
    				}
    		
    				.title{ 
    					line-height: 64rpx;
    					font-size: 24rpx;
    					font-weight: bold;
    					color: #666;
    					background-color: #fff;
    					position: sticky;
    					top: 0;
    					z-index: 999;
    				}
    				
    				.item{ 
    					padding-bottom: 10rpx;
    				}
    				
    				.goods{ 
    					display: flex;
    					flex-direction: row;
    					flex-wrap: nowrap;
    					justify-content: flex-start;
    					align-items: center;
    					align-content: center;
    					margin-bottom: 10rpx;
    					
    					&>image{ 
    						width: 120rpx;
    						height: 120rpx;
    						margin-right: 16rpx;
    						margin-left: 2px;
    						flex-shrink: 0;
    					}
    					.goods-right{ 
    						flex:1;
    					}
    					.describe{ 
    						font-size: 24rpx;
    						color: #999;
    					}
    					
    					.money{ 
    						font-size: 24rpx;
    						color: #efba21;
    					}
    				}
    			}
    		}
    	}
    	
    	.bottom-panel{ 
    		padding-bottom: 0;
    		padding-bottom: constant(safe-area-inset-bottom);  
    		padding-bottom: env(safe-area-inset-bottom);		
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/adc9218fb0c54c778ce789767c1e9ec1.png
[_https_ext.dcloud.net.cn_plugin_id_707]: https://ext.dcloud.net.cn/plugin?id=707
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201201192229256.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70