大家先看看效果
上面的效果用到了 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,点击这里查看项目源码