前言

提示：在上个版本的移动端商城中，要做一个类似拼多多的sku轮播图选择器的功能，这个功能其实还挺好玩的，难点最主要是轮播图跟sku属性关联起来，看一下拼多多的示例。

提示：以下是本篇文章正文内容，下面案例可供参考

一、了解sku数据组成和前端排列

在实现这个功能之前需要先了解一下我们的后端返给前端商品详情的数据结构

activityAllH5 为移动端特定参数所有参与的活动
productAttr 产品属性
productInfo 商品基本信息
productValue 商品属性详情

二、开发步骤

1.创建一个商品图片轮播图组件

代码如下（示例）：

<template><view class="previewImg" v-if="showBox" @touchmove.stop.prevent><view class="mask" @click="close"><swiper @change="changeSwiper" class="mask-swiper" :current="currentIndex" :circular="circular" :duration="duration"><swiper-item v-for="(src, i) in list" :key="i" class="flex flex-column justify-center align-center"><image class="mask-swiper-img" :src="src.image" mode="widthFix" /><view class="mask_sku"><text class="sku_name">{{src.suk}}</text><text class="sku_price">￥{{src.price}}</text></view></swiper-item></swiper></view><view class="pagebox" v-if="list.length>0">{{ Number(currentIndex) + 1 }} / {{ list.length }}</view><!-- #ifndef MP --><text class="iconfont icon-fenxiang share_btn" @click="shareFriend()"></text><!-- #endif --></view>
</template><script>export default {name: 'cus-previewImg',props: {list: {type: Array,required: true,default: () => {return [];}},circular: {type: Boolean,default: true},duration: {type: Number,default: 500}},data() {return {currentIndex: 0,showBox: false};},watch: {list(val) {// console.log('图片预览', val)}},methods: {// 左右切换changeSwiper(e) {this.currentIndex = e.target.current;this.$emit('changeSwitch',e.target.current)},open(current) {if (!current || !this.list.length) return;this.currentIndex = this.list.map((item)=>item.suk).indexOf(current);this.showBox = true;},close() {this.showBox = false;},shareFriend(){this.$emit('shareFriend')}}}
</script><style lang="scss" scoped>
@mixin full {width: 100%;height: 100%;
}.previewImg {position: fixed;top: 0;left: 0;z-index: 300;@include full;.mask {display: flex;justify-content: center;align-items: center;background-color: #000;opacity: 1;z-index: 8;@include full;&-swiper {@include full;&-img {width: 100%;}}}.pagebox{position: absolute;width: 100%;bottom: 20rpx;z-index: 300;color: #fff;text-align: center;}
}
.mask_sku{color: #fff;max-width: 80%;z-index: 300;text-align: center;display: flex;flex-direction: column;align-items: center;margin-top: 30rpx;.sku_name{font-size: 12px;border: 1px solid #fff;padding: 10rpx 30rpx 10rpx;border-radius: 40px;box-sizing: border-box;}.sku_price{padding-top: 10px;}
}
.font12{font-size: 24rpx;
}
.share_btn{position: absolute;top:70rpx;right:50rpx;font-size: 40rpx;color:#fff;z-index: 300;
}
.flex-column{flex-direction: column;}
.justify-center {justify-content: center;}
.align-center {align-items: center;}
</style>

2.在商品详情页使用组件

代码如下（示例）：

<template><view><!-- 省略其他代码 --><!-- 组件 --><productWindow :attr="attr" :isShow='1' :iSplus='1' @myevent="onMyEvent" @ChangeAttr="ChangeAttr"@ChangeCartNum="ChangeCartNum" @attrVal="attrVal" @iptCartNum="iptCartNum" id='product-window' @getImg="showImg"></productWindow><cus-previewImg ref="cusPreviewImg" :list="skuArr" @changeSwitch="changeSwitch" @shareFriend="listenerActionSheet"/></view>
<template/>

js部分：

//点击sku图片打开轮播图
data() {return {//......attr: {cartAttr: false,productAttr: [],productSelect: {}},productInfo: {}, //商品详情productValue: [], //系统属性skuArr:[],selectSku:{},}
}
methods:{getGoodsDetails: function() {let that = this;getProductDetail(that.id, that.type).then(res => {let productInfo = res.data.productInfo;for(let key in res.data.productValue){let obj = res.data.productValue[key];that.skuArr.push(obj)}this.$set(this, "selectSku", that.skuArr[0]);})}，/*** 属性变动赋值* */ChangeAttr: function(res) {let productSelect = this.productValue[res];this.$set(this, "selectSku", productSelect);if (productSelect) {this.$set(this.attr.productSelect, "image", productSelect.image);this.$set(this.attr.productSelect, "price", productSelect.price);this.$set(this.attr.productSelect, "stock", productSelect.stock);this.$set(this.attr.productSelect, "unique", productSelect.id);this.$set(this.attr.productSelect, "cart_num", 1);this.$set(this.attr.productSelect, "vipPrice", productSelect.vipPrice);this.$set(this, "attrValue", res);this.$set(this, "attrTxt", "已选择");} else {this.$set(this.attr.productSelect, "image", this.productInfo.image);this.$set(this.attr.productSelect, "price", this.productInfo.price);this.$set(this.attr.productSelect, "stock", 0);this.$set(this.attr.productSelect, "unique", this.productInfo.id);this.$set(this.attr.productSelect, "cart_num", 1);this.$set(this.attr.productSelect, "vipPrice", this.productInfo.vipPrice);this.$set(this, "attrValue", "");this.$set(this, "attrTxt", "请选择");}},showImg(index){//该事件是商品sku弹框的左上角图片点击事件，通过点击进入轮播图this.$refs.cusPreviewImg.open(this.selectSku.suk)},//滑动轮播图选择商品changeSwitch(e){let productSelect = this.skuArr[e];this.$set(this,'selectSku',productSelect);var skuList = productSelect.suk.split(',');skuList.forEach((i,index)=>{this.$set(this.attr.productAttr[index],'index',skuList[index]);})if (productSelect) {this.$set(this.attr.productSelect, "image", productSelect.image);this.$set(this.attr.productSelect, "price", productSelect.price);this.$set(this.attr.productSelect, "stock", productSelect.stock);this.$set(this.attr.productSelect, "unique", productSelect.id);this.$set(this.attr.productSelect, "vipPrice", productSelect.vipPrice);this.$set(this, "attrTxt", "已选择");this.$set(this, "attrValue", productSelect.suk)}}
}

这个功能主要是sku弹框和sku轮播图两个组件之间的事件互相关联很紧密，要在滑动轮播图的时候自动选择好sku的规格，反之，在点击选择sku规格的时候，点进轮播图，也自动选择好对应的图片，在此代码展示和描述有限，如果有兴趣，移步我们的开源电商地址，查看完整代码。

h5示例: CRMEB-JAVA.
gitee开源地址: CRMEB-JAVA.
都看到这里了，点击上面gitee链接给个star吧

uniapp中开发模拟拼多多sku轮播选择器相关推荐

拼多多产品轮播图如何设计?
相信在网上开店的卖家都清楚,店铺产品轮播图是十分关键的,如果卖家能够将其制作好,那么是可以有效促进转化的.那么各位卖家知道怎样设计轮播图吗?接下来小编就来详细为大家介绍一下这方面的问题,希望可以帮助到 ...
制作拼多多app网页css,5+App下Mui框架开发仿拼多多App
5+App下Mui框架开发仿拼多多App 一.整体项目介绍说明二.页面展示三.页面实现主要技术和难点四.关键代码讲解五.源码资源一.整体项目介绍说明 "拼多多"App+移 ...
5+App下Mui框架开发仿拼多多App
5+App下Mui框架开发仿拼多多App 一.整体项目介绍说明二.页面展示三.页面实现主要技术和难点四.关键代码讲解五.源码资源一.整体项目介绍说明 "拼多多"App+移 ...
Mint-UI 移动首页开发 - header导航、banner轮播图
Mint-UI 移动首页style排版问题:header导航.banner轮播图.footer底部版权··· ··· 资源预览: 中文 2.x官方文档(含演示地址): 文档首页中文 2.x官方文档( ...
Vue项目中获取数据后使用swiper轮播，无法轮播且 autoplay 和 loop 失效问题！
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...
用uni-app开发的微信小程序轮播图----和用微信小程序原生开发的轮播图
话不多说,附赠代码以下是用uni-app开发的轮播图 <template><view class="recommend"><view class=& ...
拼多多商品详情api接口拼多多sku价格信息接口
拼多多商品详细信息查询,可应用于商品销售情况分析,电商选品分析,品牌口碑挖掘和竞争对手分析等请点击注册免费测试 {"code":200,"msg":" ...
2023拼多多商品详情，拼多多sku采集
skuid.价格.收藏数.属性.券后价.店铺信息.店铺优惠券,满减等促销信息.售后承诺.主图.标题.详情页图片等 {"code": 1,"state": tru ...
vue开发一个实用美观的轮播图组件
网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用. 先上示例图: 常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组 ...

uniapp中开发模拟拼多多sku轮播选择器

文章目录

前言

一、了解sku数据组成和前端排列

二、开发步骤

1.创建一个商品图片轮播图组件

2.在商品详情页使用组件

uniapp中开发模拟拼多多sku轮播选择器相关推荐

最新文章

热门文章