mpvue实现小程序购物车左滑删除功能

1,161 阅读1分钟

大家先看看效果

使用了iview的效果
使用了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点击这里查看项目源码