大家先看看效果
使用了iview的效果
上面的效果用到了 iView Weapp，
现在开始介绍如何在微信小程序中使用iView Weapp
到下载 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，