vant-weapp介紹

vant-weapp是有贊出品的，前端組件庫，既然出自有贊之手，必然是尤其適合于做一個商城項目，它移植于vant-ui，后者有的特性大部分都已經(jīng)實現(xiàn)。vant-ui找了好久，都沒有發(fā)現(xiàn)購物車業(yè)務(wù)組件，我就從自家的有贊精選這個小程序的購物車搬一份過來。

參考目標(biāo)頁

有贊購物車

官方文檔

https://youzan.github.io/vant-weapp

安裝

npm i @vant/weapp -S --production

編譯

打開微信開發(fā)者工具，點擊 工具 -> 構(gòu)建 npm，并勾選 使用 npm 模塊 選項，構(gòu)建完成后，即可引入組件

image.png

引入各組件

1.Card 商品卡片組件

商品卡片

先在自己的購物車頁面的cart.json配置文件加上如下代碼

  "usingComponents": {
    "van-card": "/miniprogram_npm/@vant/weapp/card/index"
  }

以此類推，依次引入其他組件

2.引入Stepper 步進器組件

Stepper

3.引入SubmitBar 提交訂單欄組件

SubmitBar

4.引入SwipeCell 滑動單元格組件

SwipeCell

這里有一個坑，右滑刪除按鈕沒有樣式，自己加上

刪除按鈕無樣式

.van-swipe-cell__left,
.van-swipe-cell__right {
  display: inline-block;
  width: 65px;
  height: 44px;
  font-size: 15px;
  line-height: 44px;
  color: #fff;
  text-align: center;
  background-color: #f44;
}

刪除按鈕有樣式

5.引入復(fù)選框組件

復(fù)選框

到此為止的wxml文件

<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}" wx:for="{{carts}}" class="carts-container" wx:key="index">
  <van-card
      num="{{item.quantity}}"
      price="{{item.goods.price}}"
      title="{{item.goods.title}}"
      thumb="{{item.goods.thumb[0].url}}"
    >
    <view slot="bottom">
      <van-stepper value="{{ 1 }}" bind:change="onChange" />
    </view>
  </van-card>
  <view slot="right">刪除</view>
</van-swipe-cell>
<van-submit-bar price="{{ 3050 }}" button-text="提交訂單" bind:submit="onSubmit" />

相應(yīng)的.json引入的vant組件配置

{
  "navigationBarTitleText": "購物車",
  "usingComponents": {
    "van-card": "/miniprogram_npm/@vant/weapp/card/index",
    "van-stepper": "/miniprogram_npm/@vant/weapp/stepper/index",
    "van-swipe-cell": "/miniprogram_npm/@vant/weapp/swipe-cell/index",
    "van-submit-bar": "/miniprogram_npm/@vant/weapp/submit-bar/index",
    "van-checkbox": "/miniprogram_npm/@vant/weapp/checkbox/index",
    "van-checkbox-group": "/miniprogram_npm/@vant/weapp/checkbox-group/index"
  }
}

繼續(xù)完善

目前的效果

1.右滑刪除按鈕過高，左滑還有多余的按鈕

給刪除按鈕的slot加上class如下

.delete {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

2.submitBar遮攔了購物車列表

加入margin-bottom的css樣式

.container {
  margin-bottom: 50px;
}

3.復(fù)選框樣式

由于van-checkbox為我們暴露出來了一個custom-class，于是定義它就好；而icon-class怎么試也沒有成功，索性干脆覆蓋了樣式van-checkbox__icon-wrap，使用checkbox圖標(biāo)垂直居中

/* 復(fù)選框樣式 */
.custom-class {
  margin-left: 10px;
}

/* 覆蓋復(fù)選框包裝容器樣式 */
.van-checkbox__icon-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

同理label-class也無效，故伎重施直接覆蓋

/* 復(fù)選框label樣式 */
.van-checkbox__label {
  margin-left: 0;
}

label-class自定義

復(fù)選框與商品之間邊距太大好難受

邊距

只能拿右邊的van-card開刀了

/* 商品卡片 */
view.van-card {
  padding-left: 0;
}

搞定，這里是用的view.van-card，而非直接.van-card。

做到這里，我也明白為什么剛剛label重寫失敗了。

上述的.van-checkbox__label改成view.van-checkbox__label其實也能成功，以上二選一，都行。

繼續(xù)改進，發(fā)現(xiàn)最優(yōu)解決是這樣的：

view.label-class {
  margin-left: 0;
}

這樣既可以解決左邊距問題，還不會影響其他的checkbox的樣式，比如最下方的全選按鈕checkbox

4.stepper組件樣式自定義，右對齊，x1這個原生的去掉

加van-card的bottom slot加個樣式，然后順手把num屬性去掉，就不會顯示x1數(shù)量了

/* 商品數(shù)量 */
.stepper-slot {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

最后樣式排起來就是這樣，順眼多了

最終樣式

結(jié)語

其實這個購物車頁面，在小程序剛出來的時候，自己也造了一個輪子，源碼在https://gitee.com/dotton/lendoo-wx，現(xiàn)如今第3方組件庫這么豐富了，可以拿來就用，比自己寫的好太多，又一個套裝，風(fēng)格一致體驗好，這真是件幸福的事。

關(guān)注我

歡迎關(guān)注訂閱號【黃秀杰】

mp