精华内容
下载资源
问答
  • uniapp商品详情页购物车选择 提示:这里因为后台返回的数据格式原因,代码性能可能有点稍差,但是注释是很完整的 文章目录uniapp商品详情页购物车选择先上代码,以示诚意后台接口返回的数据格式实现讲解 先上代码...

    uniapp商品详情页购物车选择

    提示:这里因为后台返回的数据格式原因,代码性能可能有点稍差,但是注释是很完整的



    先上代码,以示诚意

    <template>
      <view>
    		<!-- 循环 -->
        <view class="sku-list" v-for="item in this.userChooseSkuList" :key="item.id">
    			<!-- sku标题 -->
    			<view class="sku-title">{{item.skuTitle}}</view>
    			<!-- 供用户选择的skuLabel -->
    			<view class="sku-label-list">
    				<view class="label"v-for="(label,index) in item.skuList"
    							@tap="skuLabelClick(item,label,index)"
    							 :key="label.id" :class="{'active':label.checked}">
    					{{label.labelText}}</view>
    			</view>
    		</view>
      </view>
    </template>
    
    <script>
    export default {
      data () {
        return {
        	// 接口返回的SUK列表
          skuHttpList: {
            尺码: ['S', 'M', 'L', 'XL', 'XXL'],
            颜色: ['红色', '蓝色', '绿色', '紫色', '橙色', '黑色'],
            套装: ['全身', '半身', '上装', '下装']
          },
    			// 组织好的参数,用来循环供用户选择的sku列表
    			userChooseSkuList:[],
    			// 用户选择中的sku对象
    			userChooseSku: {},
    			// 接口返回的sku列表
    			httpSkus: [
    				{
    					'id': 1,
    					'price': '0.00',
    					'marketPrice': '0.00',
    					'costPrice': '0.00',
    					'stock': 0,
    					'productId': 55,
    					'productSpecs': {
    						'尺码': 'S',
    						'颜色':'红色',
    						'套装':'全身'
    					},
    					'status': 1
    				},{
    					'id': 2,
    					'price': '0.00',
    					'marketPrice': '0.00',
    					'costPrice': '0.00',
    					'stock': 0,
    					'productId': 55,
    					'productSpecs': {
    						'尺码': 'M',
    						'颜色':'蓝色',
    						'套装':'上装'
    					},
    					'status': 1
    				},{
    					'id': 3,
    					'price': '0.00',
    					'marketPrice': '0.00',
    					'costPrice': '0.00',
    					'stock': 0,
    					'productId': 55,
    					'productSpecs': {
    						'尺码': 'XL',
    						'颜色':'橙色',
    						'套装':'全身'
    					},
    					'status': 1
    				},{
    					'id': 4,
    					'price': '0.00',
    					'marketPrice': '0.00',
    					'costPrice': '0.00',
    					'stock': 0,
    					'productId': 55,
    					'productSpecs': {
    						'尺码': 'L',
    						'颜色':'绿色',
    						'套装':'下装'
    					},
    					'status': 1
    				},{
    					'id': 5,
    					'price': '0.00',
    					'marketPrice': '0.00',
    					'costPrice': '0.00',
    					'stock': 0,
    					'productId': 55,
    					'productSpecs': {
    						'尺码': 'XXL',
    						'颜色':'黑色',
    						'套装':'半身'
    					},
    					'status': 1
    				},
    			]
        }
      },
      onLoad () {
        this.initData()
      },
      methods: {
        // 页面初始化加载方法
        initData () {
          this.getShopInfo()
        },
    		/* 这里调用接口,然后组织参数 */
        getShopInfo () {
        	// skuLabelId是一个自定义的id,因为uniapp在微信小程序上面双层循环用index会报错,所以生成一个自定义的保存id
        	let skuLabelId = 0
    			for (let skuI in this.skuHttpList){
    				// 每次循环,自定义的变量id自增,防止重复
    				++skuLabelId
    
    				// 这里skuI是获取所有的键
    				console.log(skuI)
    
    				// 定义一个对象,用来存储生成可循环的SKU
    				let skuObj={
    					id:skuLabelId,
    					skuTitle:skuI,
    					skuList:[],
    				}
    
    				// 这里组织sku列表
    				for(let j= 0;j<this.skuHttpList[skuI].length;j++){
    						// 把接口返回的SUK列表skuHttpList里面的值放到skuObj的skuList里面
    					skuObj.skuList.push({
    						id:skuLabelId+j,
    						checked:false,
    						labelText:this.skuHttpList[skuI][j]
    					})
    				}
    				// 这里就是组合好的参数了,用来v-for循环
    				this.userChooseSkuList.push(skuObj)
    				console.log(this.userChooseSkuList)
    			}
        },
    		// 标签的点击事件
    		skuLabelClick(skuRow,skuLabel,index){
    			console.log(skuRow)
    			console.log(skuLabel)
    			console.log(index)
    			// todo 这里其实可以用vue中的$set方法
    			// 先把点击那一列checked重置为false
    			skuRow.skuList.map(item=>{
    				item.checked = false
    			})
    			// 然后让点击的那一个checked变为true(这里已经实现规格选择了)
    			skuRow.skuList[index].checked = true
    
    			// 组织合并用户点击的sku,和接口返回的sku列表做比较,显示用户选中的规格
    			this.userChooseSku[skuRow.skuTitle] =skuLabel.labelText
    			console.log(this.userChooseSku)
    
    			this.httpSkus.forEach(item=>{
    				// 调用对象比较的方法,确定是哪个sku
    				if(this.isObjectValueEqualNew(this.userChooseSku,item.productSpecs)){
    					/*
    					* 目前写的是静态的数据,只有这5个能匹配到
    					* '尺码': 'S',			'尺码': 'M'		'尺码': 'XL'		'尺码': 'L'		'尺码': 'XXL',
    						'颜色':'红色'			'颜色':'蓝色'		'颜色':'橙色'		'颜色':'绿色'		'颜色':'黑色',
    						'套装':'全身'			'套装':'上装'		'套装':'全身'		'套装':'下装'		'套装':'半身'
    					* */
    					// 这里的item就是匹配到的值了
    					console.log(item)
    				}
    			})
    		},
    
    		// 判断对象键和值是否相等
    		isObjectValueEqualNew(a, b) {
    			// 判断两个对象是否指向同一内存,指向同一内存返回true
    			if (a === b) return true;
    			// 获取两个对象键值数组
    			let aProps = Object.getOwnPropertyNames(a);
    			let bProps = Object.getOwnPropertyNames(b);
    			// 判断两个对象键值数组长度是否一致,不一致返回false
    			if (aProps.length !== bProps.length) return false;
    			// 遍历对象的键值
    			for (let prop in a) {
    				// 判断a的键值,在b中是否存在,不存在,返回false
    				if (b.hasOwnProperty(prop)) {
    					// 判断a的键值是否为对象,是则递归,不是对象直接判断键值是否相等,不相等返回false
    					if (typeof a[prop] === 'object') {
    						if (!isObjectValueEqual(a[prop], b[prop])) return false;
    					} else if (a[prop] !== b[prop]) {
    						return false;
    					}
    				} else {
    					return false;
    				}
    			}
    			return true;
    		},
      }
    }
    </script>
    
    <style>
    		.sku-list{
    			margin-bottom: 20rpx;
    		}
    	.sku-title{
    		font-weight: bold;
    	}
    	.sku-label-list{
    		display: flex;
    		justify-content: left;
    	}
    	.label{
    		padding: 10rpx 20rpx;
    		margin-right: 20rpx;
    		height: 60rpx;
    		line-height: 60rpx;
    		background: #f5f5f5;
    		border-radius: 4rpx;
    	}
    	.label.active{
    		background: #2f8eed;
    		color: #FFFFFF;
    	}
    </style>
    
    

    这是实现的大致效果
    在这里插入图片描述

    后台接口返回的数据格式

    这是后台返回供用户选择的SKU列表,对应的就是代码里面的skuHttpList
    在这里插入图片描述
    这是后台返回组合后SKU的数据
    在这里插入图片描述

    实现讲解

    注释已经写的很清楚了,不用上讲解了,嘻嘻

    展开全文
  • <template> <view class="goods-list"> <goods-list :goods="goods" @goodsItemClick="goGoodsDetail"></goods-list> <... import goodsList from '../../compon.
    <template>
    	<view class="goods-list">
    		<goods-list :goods="goods" @goodsItemClick="goGoodsDetail"></goods-list>
    		<view>我是有底线的</view>
    	</view>
    </template>
    <script>
    	import goodsList from '../../components/goods-list/goods-list.vue'
    	export default {
    		data() {
    			return {
    				pageindex: 1,
    				goods: [],
    				flag: false
    			}
    		},
    		components: {"goods-list": goodsList},
    		methods: {
    			async goodsList(callBack) {
    				const res = await uni.$myRequest({
    					url: '/api/getGoods?pageindex='+this.pageindex
    				})
    				this.goods = [...this.goods, res.data.message]
    				callBack && callBack()
    			},
    			// 跳转到商品详情页
    			goGoodsDetail(id) {
    				uni.navigatorTo({
    					url: '/pages/goods-detail/goods-detail?id='+id
    				})
    			}
    		},
    		onLoad() {
    			this.getGoodsList()
    		},
    		onReachBottom() {
    			// 上拉加载
    			if (this.goods.length < 10) return this.flag = true
    			console.log('触底了')
    			this.pageindex++
    			this.goodsList()
    		},
    		onPullDownRefresh() {
    			//  下拉刷新
    			console.log('下拉刷新了')
    			this.pageindex = 1
    			this.goods = []
    			this.falg = false
    			setTimeout(()=>{
    				this.goodsList(()=>{
    					uni.stopPullDownRefresh()
    				})
    			}, 1000)
    		}
    	}
    </script>
    
    <style>
    	.content {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    </style>
    
    <template>
    	<view class="goods-list">
    		<view class="goods-item" v-for="item in goods" :key="item.id" @click="navigator(item.id)">
    			<iamge :src="item.img_url"></iamge>
    			<view class="price">
    				<text>{{item.sell_price}}</text>
    				<text>{{item.market_price}}</text>
    			</view>
    			<view class="name">
    				{{item.title}}
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				
    			}
    		},
    		props:['goods'],
    		methods: {
    			navigator(id) {
    				this.$emit('goodsItemClick', id)
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>
    

     

    展开全文
  • uniapp详情页滚动显示标题 “titleNView”: { “type”: “transparent” } "pages": [{ "path": "pages/news/index", "style": {} }, { "path": "pages/news/detail", "style": { "app-plus": { ...

    uniapp详情页滚动显示标题
    “titleNView”: {
    “type”: “transparent”
    }

    "pages": [{
          "path": "pages/news/index",
          "style": {}
        },
        {
          "path": "pages/news/detail",
          "style": {
            "app-plus": {
              "titleNView": {
                "type": "transparent"
              }
            }
          }
        }
    
    展开全文
  • uniapp 电商app商品详情页视频播放 类似于上图的这种形式,商品视频是可以播放展示的。 但是由于uniapp中的video组件的坑,导致视频永远在第一层,如果是商品轮播图中是视频与图片的集合,则视频永远都是在最上层,...

    uniapp 电商app商品详情页视频播放

    在这里插入图片描述
    类似于上图的这种形式,商品视频是可以播放展示的。
    但是由于uniapp中的video组件的坑,导致视频永远在第一层,如果是商品轮播图中是视频与图片的集合,则视频永远都是在最上层,左右切换时是看不到图片的。

    最终的解决方法就是:
    在商品详情页面中还是图片的集合,在视频部分,是底图+播放按钮的组合。
    当点击此部分进行视频播放时,将视频全屏播放,只有当视频退出全屏播放时,再显示为图片。

    部分代码如下:

    遍历detail.meddias这个数组,里面可以渲染所有的图片或者视频。
    数组中有个参数:mediaType,如果参数为0,则为图片,否则为视频。
    视频的展示方式是:图片+播放按钮的形式。

    <swiper indicator-dots circular=true @change="swiperChange" duration="400">
    	<swiper-item class="swiper-item" v-for="(item,index) in detail.medias" :key="index">
    		<view class="image-wrapper" v-if="item.mediaType === 0">
    			<image
    				:src="item.mediaUrl" 
    				class="loaded" 
    				mode="aspectFill"
    			></image>
    		</view>
    		<view class="image-wrapper" style="position: relative;" @click="toPlayVideo(item.mediaUrl)" v-else>
    			<image
    				:src="detail.medias[1].mediaUrl"
    				class="loaded" 
    				mode="aspectFill"
    			></image>
    			<image mode="aspectFill" class="loaded"  style="width: 60px;height: 60px;position: absolute;top: 50vw;left: 40vw;" src="../../static/play.png"></image>
    		</view>
    	</swiper-item>
    </swiper>
    

    点击视频封面图时,触发的函数如下:

    toPlayVideo(url){
    	this.videoUrl = url;
    	setTimeout(()=>{
    		this.videoContext = uni.createVideoContext('myVideo');
    		this.videoContext.requestFullScreen({ direction: 0 });
    		this.videoContext.play();
    	},100)
    }
    

    此处的videoUrl就是视频的播放链接,这个链接如果有内容,则全屏播放视频,如果没有内容,则隐藏。
    video组件的代码如下:

    <video style="position: fixed;width: 0px;height: 0px;" v-show="videoUrl" id="myVideo" @fullscreenchange="changeFull" object-fit="contain" :src="videoUrl"></video>
    

    video组件全屏展示的话,style样式应该是position:fixed;top:0;left:0;这样就全屏展示了。
    v-show用于判断video组件的显示与隐藏,如果有视频链接则展示,如果没有则不展示。
    id:myVideo,id可以用来确定视频组件的唯一性。
    @fullscreenchange 监听video是否全屏,如果参数为true,则为全屏,否则不为全屏。
    object-fit:视频的展示形式,contain保证视频能够展示全,展示不全的部分黑色底展示。
    src:指定的video组件的视频链接。

    监听视频全屏的触发函数:

    changeFull(e){
    	if(!e.detail.fullScreen){
    		this.videoContext.stop();
    		this.videoUrl = false;
    	}
    }
    
    展开全文
  • uniapp仿淘宝详情页页面滑动tab切换 建立util文件夹放一个Tool.js: export default{ getRect(selector){ return new Promise((resolve) => { // uni.createSelectorQuery获取元素节点,小程序里wx....
  • uniapp普通电商详情页使用富文本

    千次阅读 2019-11-11 15:03:37
    因为uniapp在h5和app和小程序显示不同所以使用条件编译来适配不同的 filters: { /** * 处理富文本里的图片宽度自适应 * 1.去掉img标签里的style、width、height属性 * 2.img标签添加style...
  • 最近在接触电商小程序,是通过Uniapp开发的。 结果发现里面还是有很多的知识点的,基本上可以看作是数据格式的转化。 下面一部分一部分的详细介绍: 标题部分——page.json page.json { "path": "pages/product/...
  • QQ 1274510382 Wechat JNZ_aming 商业联盟 QQ群538250800 技术搞事 QQ群599020441 解决方案 QQ群152889761 加入我们 QQ群649347320 共享学习 QQ群674240731 纪年科技aming 网络安全 ,深度学习,嵌入式,机器强化,生物...
  • 查看名片 1年 店铺商品推荐(9) 查看全部 红毛淘汰鸡八九成毛 ¥43/只 1730人看过 红毛淘汰鸡八九成毛 ¥43/只 1730人看过 红毛淘汰鸡八九成毛 ¥43/只 1730人看过 货品详情 专业实体二十年。专业实体二十年。专业...
  • 模仿京东app商品详情页,源码apk可下载
  • 自定义ViewGroup实现仿淘宝的商品详情页

    万次阅读 多人点赞 2015-07-23 14:28:45
    最近公司在新版本上有一个需要, 要在首页添加一个滑动效果, 具体就是仿照X宝的商品详情页, 拉到页面底部时有一个粘滞效果,  如下图 X东的商品详情页,如果用户继续向上拉的话就进入商品图文描述界面: 刚...
  • 在做安卓商城项目时,产品经理老是拿京东和淘宝做样板,然后,就有了这个demo,实现在商品详情页上拉显示详情,主要技术就是处理ScrollView嵌套ScrollView或WebView时触摸、滑动事件的交互处理
  • 这个时候我们的点击滚动已经完成,可以把isScroll 改为false了, setTimeout(() => { that.isScroll = false },250) }).exec() }, 监听页面滚动,实现滚动效果,我在这里使用的是uniapp的页面生命周期...
  • #uni-app小程序中商品详情页轮播图中加入视频播放功能,使用video标签实现 功能介绍 商城类项目需要在商品详情页轮播图中的第一个轮播图显示成视频进行播放 出现问题 1、视频可以播放,但是功能按钮都不管用,暂停...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 158
精华内容 63
关键字:

uniapp商品详情页