效果展示

步骤1：获取相关数据

  onLoad: function (options) {// console.log(options.goodsid,typeof options.goodsid)let goodsid=Number(options.goodsid)// console.log(goodsid)let params={goods_id:goodsid}let url='https://api-hmugo-web.itheima.net/api/public/v1/goods/detail'let promise=getRequest(url,params)promise.then((res)=>{// console.log(res)// console.log(typeof res.data.message.goods_introduce)this.setData({productData:res.data.message})})}

步骤2：轮播效果实现

    <swiper indicator-dots="{{true}}" autoplay="{{true}}" circular="{{true}}" interval="5000"><swiper-item  wx:for="{{productData.pics}}" wx:key="index"><image class="proPic" src="{{item.pics_big}}" mode="widthFix">     </image></swiper-item>  </swiper>

步骤3：将字符串转为HTML渲染至页面

<rich-text class="" nodes="{{productData.goods_introduce}}"></rich-text>

步骤4：底部交互效果实现

<view class="footNav"><view class="footLeft"><view class="sec">联系客服</view><view class="sec">分享</view><view class="sec" bindtap="enterCar">购物车</view></view><view class="footRight"><view class="goCar" bindtap="addCar">加入购物车</view><view class="goBuy">立即购买</view></view>
</view>

步骤5：加入购物车功能实现

  addCar:function(){// 获取缓存的商品信息let cart=wx.getStorageSync('cart')||[];// 判断缓存的商品信息中是否已经存在该商品let index=cart.findIndex((v)=>{// 查找索引，存在返回1；不存在返回-1return v.goods_id===this.data.productData.goods_id})// 不存在if(index===-1){console.log('不存在')this.data.productData.num=1console.log(this.data.productData)cart.push(this.data.productData)console.log(cart)}else{// 存在console.log('存在')cart[index].num++}wx.setStorageSync('cart',cart)wx.showToast({title: '成功加入购物车',image: 'success',duration: 1500,mask: true,});   }

步骤6：进入购物车页面

  // 进入购物车界面enterCar:function(){wx.switchTab({url: '../../pages/cart/cart'});}

微信小程序商城项目（篇7）：商城详情页实现相关推荐

微信小程序实现商品列表跳转详情页
实验要求模仿京东小程序,实现下列功能首页包含了手机图片,手机的描述,手机的价格,购物车图标首页显示两行文字,多余的文字隐藏,以3个点代替点击页面不同的地方,能够跳转到不同的手机详情页面手机详 ...
微信小程序开发（九）————文章详情页的实现
我们在上一篇文章中已经制作出来了个人博客列表页,本篇实现详细内容. 首先第一步我们肯定是要创建文件夹,我们选择在pages目录下面的post目录里面创建post-detail的文件夹,如图: 教给大家 ...
微信小程序开发之——个人中心-个人详情页(6)
一概述个人详情页对应的页面为:pages/detail/detail 页面搭建页面逻辑二页面搭建 2.1 布局文件(detail.wml) <view class="info ...
【系】微信小程序云开发实战坚果商城-商城项目搭建
第 2-1 课:商城项目搭建目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微 ...
【系】微信小程序云开发实战坚果商城-扩展篇
第 5-1 课:扩展篇目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信小程 ...
【系】微信小程序云开发实战坚果商城-云开发开篇
第 3-2 课:云开发开篇目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信 ...
【系】微信小程序云开发实战坚果商城-开篇
开篇:无服务开发是未来? 目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信小 ...
【系】微信小程序云开发实战坚果商城-弹性盒子
第 1-1 课:微信小程序实操弹性盒子目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...
【系】微信小程序云开发实战坚果商城-前端之订单实现
第 2-7 课:前端之订单实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系] ...
【系】微信小程序云开发实战坚果商城-云开发之商品信息和主题商品数据实现
第 3-8 课:云开发之商品信息和主题商品数据实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES ...

微信小程序商城项目（篇7）：商城详情页实现

效果展示

步骤1：获取相关数据

步骤2：轮播效果实现

步骤3：将字符串转为HTML渲染至页面

步骤4：底部交互效果实现

步骤5：加入购物车功能实现

步骤6：进入购物车页面

微信小程序商城项目（篇7）：商城详情页实现相关推荐

最新文章

热门文章