用微信小程序作一個小電商 sku

效果展現圖

 

 

 

 

功能點概述

1. 圖一功能點有
   1. 搜索
   2. 輪播圖
   3. 商品展現
   4. 圖二功能點
      1. 導航欄
      2. 加入購物車
      3. 圖四功能點
         1. 評論點
         2. 圖五購物車
            1. 複選框 ( 全選全不選 )
            2. 即點即改
            3. 總計結算

 

功能詳解

 

1.A（搜索）

使用微信小程序自帶函數bindinput實現

在每次輸入一個字符的時候就會觸發這個函數也就是，每次input框中的值發送改變都會觸發bindinput綁定的事件

圖示：

Wxml端

 

Js端

 

獲取到值以後就能夠放到接口中進行查詢而後查詢結果直接循環到頁面中使用

1.B（輪播圖）

網址 :  https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

輪播圖主要使用的是swiper標籤進行循環

 

如圖示設置屬性進行輪播

代碼以下：

Wxml端

 

Js端

 

1.C（商品展現）

寫一個width爲49%的盒子用一個循環包裹 將數據的位置排版好 而後用

<block wx:for=」{{GoodsArr}}」>

你寫的盒子

</block>

循環出來大概就是這個樣子的

 

 

 

2.A（導航欄）

思路：

首先在js端設置一個數組 而後直接將數組放到四個並排的div上並設置點擊事件並綁定參數nav.id

點擊以後根據它的id 用this.setData 直接修改對應id的樣式名這樣樣式就作好了

而後咱們在樣式切換後要跳轉到對應的頁面

就使用scroll-view 下的scroll-into-view={{某個盒子的id}}屬性就會跳轉對應id的盒子的開頭處

 

 

1. b（添加購物車）

這個也沒什麼難度

主要是聯查獲取用戶的惟一標識和商品的惟一標識和購買的數量我寫死了設置爲1而後調取接口入庫就ok

3.A（評論）

這個沒什麼難度。。。。。。。。

主要就是在頁面中獲取到用戶的惟一標識和商品的惟一標識和你的評論內容（上面1.A中有獲取input框中value的辦法）

4.A(複選框)

使用

<checkbox-group bindchange="checkboxChange">

<checkbox value="{{item.carid}}" checked="{{item.check}}"/>

<checkbox value="{{item.carid}}" checked="{{item.check}}"/>

<checkbox value="{{item.carid}}" checked="{{item.check}}"/>

</checkbox-group>

這樣寫以後

每次點擊其中一個盒子他就會獲取你checkbox中的value值 你能夠設置爲你須要的值進行獲取而且存放

checkboxChange:function(e){

e.detail.value->爲一個數組 [1,5,9]

}

以後獲取到你要的值以後就能夠自由發揮了

4.B即點即改

思路：

點擊以後在把數組中對應的值setData就ok

意味點擊以後 觸發事件 調取接口 成功後 在前臺 修改值

上代碼

 

4.c（總計結算）

使用4.A獲取到購物車的id以後當即調取接口進行計算並返回前臺（直接setData）對應的值