uniapp 左滑删除功能

最新推荐文章于 2023-12-29 11:53:13 发布

Erica_莲子

最新推荐文章于 2023-12-29 11:53:13 发布

阅读量443

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/2201_75783276/article/details/130093103

版权

文章介绍了在uni-app中结合uni-swipe-action和uni-swipe-action-item组件来创建删除功能。通过在data中定义options，配置滑动操作项，然后利用Vuex的mapMutations方法映射deleteGood方法，实现在点击删除按钮后调用删除商品的逻辑。在cartStore的mutations里，找到要删除的商品并从cart数组中移除，最后更新存储。

摘要由CSDN通过智能技术生成

使用uni-swipe-action和uni-swipe-action-item组件，两个都要进行注册

配置options信息

data() {
			return {
				options2: [{
					text: '删除',
					style: {
						backgroundColor: '#C00000'
					}
				}]
			};
		}

点击之后，操作仓库数据

import {mapMutations} from 'vuex'
export default{
    methods:{
        ...mapMutations('cartStore', ['deleteGood']),
        // 购物车删除产品
			deleteGoodDetail(goodDetail) {
				this.deleteGood(goodDetail)
			},
    }
    
}

cartStore

state:()=>({
	cart:JSON.parse(uni.getStorageSync('cart') || '[]')
}),
mutations:{
    deleteGood(state,goods){
			var goodIndex = 0
			var result = state.cart.find(function(currentValue, index,arr){
				goodIndex = index
				return currentValue.goods_id == goods.goods_id				
			})
			state.cart.splice(goodIndex,1)
			Storage.setCartStorage(state.cart)
		}

}

效果