小程序開發(fā)中如何實現(xiàn)一個簡單的購物車功能-創(chuàng)新互聯(lián)

這篇文章給大家介紹小程序開發(fā)中如何實現(xiàn)一個簡單的購物車功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)主要從事網(wǎng)站制作、網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)重慶,十余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

1、購物車界面功能實現(xiàn)

先來弄清楚購物車的需求。

• 單選、全選和取消，而且會隨著選中的商品計算出總價
• 單個商品購買數(shù)量的增加和減少
• 刪除商品。當(dāng)購物車為空時，頁面會變?yōu)榭召徫镘嚨牟季?/li>

根據(jù)設(shè)計圖，我們可以先實現(xiàn)靜態(tài)頁面。接下來，再看看一個購物車需要什么樣的數(shù)據(jù)。

首先是一個商品列表(carts)，列表里的單品需要：商品圖(image)，商品名(title)，單價(price)，數(shù)量(num)，是否選中(selected)，商品id(id)
然后左下角的全選，需要一個字段(selectAllStatus)表示是否全選了右下角的總價(totalPrice)最后需要知道購物車是否為空(hasList)
知道了需要這些數(shù)據(jù)，在頁面初始化的時候我們先定義好這些。

2、下面是代碼

<view class="main">
 <view wx:if="{{hasList}}">
  <view class="cart-box">
   <view class="cart-list" wx:for="{{carts}}" wx:key="{{index}}">
    <icon wx:if="{{item.selected}}" type="success" color="red" data-index="{{index}}" class="cart-pro-select" bindtap="selectList"/>
    <icon wx:else type="circle" class="cart-pro-select" data-index="{{index}}" bindtap="selectList"/>
    <navigator url="../details/details&#63;id={{item.id}}"><image class="cart-thumb" src="{{item.image}}"/></navigator>
    <text class="cart-pro-name">{{item.title}}</text>
    <text class="cart-pro-price">￥{{item.price}}</text>
    <view class="cart-count-box">
     <text class="cart-count-down" bindtap="minusCount" data-obj="{{obj}}" data-index="{{index}}">-</text>
     <text class="cart-count-num">{{item.num}}</text>
     <text class="cart-count-add" bindtap="addCount" data-index="{{index}}">+</text>
    </view>
     <text class="cart-del" bindtap="deleteList" data-index="{{index}}">x</text>
   </view>
  </view>
   
   <view class="cart-footer">
    <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff" class="total-select" bindtap="selectAll"/>
    <icon wx:else type="circle" color="#fff" class="total-select" bindtap="selectAll"></icon>
    <view class="order-icon">
     <navigator url="../orders/orders"><image src="/image/icon3.png" /></navigator>
    </view>
    <text>全選</text>
    <text class="cart-total-price">￥{{totalPrice}}</text>
   </view> 
 </view>
 <view wx:else>
  <view class="cart-no-data">購物車是空的哦</view>
 </view> 
</view>

分享標(biāo)題：小程序開發(fā)中如何實現(xiàn)一個簡單的購物車功能-創(chuàng)新互聯(lián)
分享URL：http://www.muchs.cn/article40/pccho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、網(wǎng)站排名、品牌網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、Google、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)