效果展示

步驟1：獲取相關(guān)數(shù)據(jù)

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：輪播效果實現(xiàn)

<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：將字符串轉(zhuǎn)為HTML渲染至頁面

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

步驟4：底部交互效果實現(xiàn)

<view class="footNav"><view class="footLeft"><view class="sec">聯(lián)系客服</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：加入購物車功能實現(xiàn)

addCar:function(){// 獲取緩存的商品信息let cart=wx.getStorageSync('cart')||[];// 判斷緩存的商品信息中是否已經(jīng)存在該商品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'});}

總結(jié)

以上是生活随笔為你收集整理的微信小程序商城项目（篇7）：商城详情页实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。