大家先看看效果

上面的效果用到了 iView Weapp，點選進入官方文件

現在開始介紹如何在微信小程式中使用iView Weapp

到GitHub下載 iView Weapp 的程式碼，將 dist 目錄拷貝到自己的專案中。然後按照如下的方式使用元件：

在mpvue專案中建議大家把dist目錄放在static資料夾下，如下

1. 新增需要的元件。在頁面的 json 中配置（路徑根據自己專案位置配置）：

• 先給大家看看我的專案目錄：（我這裡是在單頁對應的main.js中配置），如下

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

export default {
  config: {
    navigationBarTitleText: '購物車',
    enablePullDownRefresh: true,
    usingComponents: {
      'i-swipeout': '/static/iview/swipeout/index',
      'i-icon': '/static/iview/icon/index'
    }
  }
}
 

2. 在 wxml 中使用元件：

• 然後在自己對應的元件中使用上述自定義標籤（這裡直接在對應頁面的index.vue中使用）
• 給大家看看我是如何引用，如下

• 注意，刪除的事件應該寫在標籤上，如上面的@change寫在i-swipeout標籤上，當點選紅色區域帶上相應的引數做刪除操作，程式碼如下

   handleDelete (skuSn) {
      let that = this
      wx.showModal({
        title: '提示',
        content: '確定刪除該商品嗎？',
        confirmColor: '#5BB53C',
        success: function(res) {
        if (res.confirm) {
            tools.checkToken().then(res => {
            if (res) {
                tools.axios(api.addCar + '/' + skuSn, '', 'DELETE').then(res => {
                if (res.data.code === 1) {
                  that.$emit('getList')
                  } else {
                    tools.showToast('刪除商品失敗')
                  }
                })
              }
            })
          }
        }
      })
    }
 

這裡提醒下大家，不用將整個dist引入到專案中，只引入自己需要的來減小專案程式碼體積，希望看了這篇文章能對大家有所幫助