大家先看看效果

使用了iview的效果

上面的效果用到了 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引入到项目中，只引入自己需要的来减小项目代码体积，希望看了这篇文章能对大家有所帮助

大家如果对小程序UI库感兴趣可以看看我整理的Demo，点击这里查看项目源码