微信小程序删除滑块 SwiperCell 自动收起 Van weapp van-swipe-cell 滑块自动收起 点击页面也自动收起滑块

  1. 在当前页面整个 view 中 给页面绑定 点击事件bindtap="onSwipeCellPage"
  2. 给 van-swipe-cell 组件设置 id (for循环可以添加 id="swip-cell-{``{item.id}}"
  3. van-swipe-cell 组件 添加属性 当用户打开滑块时触发 bind:open="swiperCellOpen"
  4. van-swipe-cell 组件 添加属性 点击滑动单元格时触发的事件 bind:click="onSwipeCellClick"
  5. 需要对单元格实例数组进行遍历,遍历以后获取每一个实例,让每一个实例调用 close 方式即可

示例

  1. 新建文件夹 SwiperCell.js
javascript 复制代码
Page({
    data: {
        swipeCellQueue: [], //用来存储滑动单元格实例 
    },

    // 当用户打开滑块时触发
    swiperCellOpen(event) {
        // 获取单元格实例
        const instance = this.selectComponent(`#${event.target.id}`)
        // 将实例追加到数据中
        this.data.swipeCellQueue.push(instance)
    },
    // 给页面绑定 点击事件
    onSwipeCellPage() { this.onSwipeCellCommonClick() },
    // 点击滑动单元格时触发的事件
    onSwipeCellClick() { this.onSwipeCellCommonClick() },
    onSwipeCellCommonClick() {
        // 需要对单元格实例数组进行遍历,遍历以后获取每一个实例,让每一个实例调用 close 方式即可
        this.data.swipeCellQueue.forEach((instance) => {
            instance.close()
        })
        // 将滑动单元格数组重置为空
        this.data.swipeCellQueue = []
    }
})
  1. 然后在使用文件 wxml 中 最外层的 view 绑定 页面点击事件 bindtap="onSwipeCellPage"
  2. 给 swipe-cell 绑定一个 id <van-swipe-cell class="goods-swipe" right-width="{``{ 65 }}" id="swipe-cell-{``{item.id}}">
  3. 给 swipe-cell 绑定open和click事件 <van-swipe-cell class="goods-swipe" right-width="{``{ 65 }}" id="swipe-cell-{``{item.id}}" bind:open="swiperCellOpen" bind:click="onSwipeCellClick">
  4. 在 使用文件 js 中 引入 Behaviors
  5. 然后在 onHide 方法 引入 在页面隐藏的时候,需要让删除滑块自动弹回
javascript 复制代码
import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { userStore } from '@/stores/userStore'
import { reqDelCartGoods } from "@/api/cart"

import { swipeCellBehavior } from "@/behaviors/swiperCell"
const computedBehavior = require("miniprogram-computed").behavior
ComponentWithStore({
    behaviors: [ swipeCellBehavior],
    storeBindings: {
        store: userStore,
        fields: ['token']
    },
    data: {
        cartList: []
    },
    methods: {
        //  如果使用 Compoent 方法来构建页面
        // 生命周期钩子函数 需要在 methods 中才可以
        // 删除商品
        async delCartGoods(evnet) {
        	// 要删除的id
            let { id } = evnet.currentTarget.dataset
            // 自己封装的 modal方法
            const isOk = await wx.modal({
                title: '提示',
                content: "您确定要删除吗?"
            })

            if (!isOk) {
                return
            }
            const res = await reqDelCartGoods(id)
            if (res.code === 200) {
                ....
            }

        },
        onHide() {
            this.onSwipeCellCommonClick()
        }

    }
})
相关推荐
weixin_177297220691 小时前
剧本杀APP系统开发:打造多元化娱乐生态的先锋力量
小程序·娱乐·剧本杀
毕设源码-赖学姐2 小时前
【开题答辩全过程】以 基于Springboot+微信小程序的网上家教预约系统的设计与实现-开题为例,包含答辩的问题和答案
spring boot·后端·微信小程序
weixin_177297220692 小时前
扭蛋机小程序系统开发:连接线上线下娱乐的新桥梁
小程序·娱乐·扭蛋机·盲盒
毕设源码-赖学姐3 小时前
【开题答辩全过程】以 交通管理乱停车小程序的设计与实现为例,包含答辩的问题和答案
小程序
说私域3 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的营销创新研究——以“种草”实践践行“以人为本”理念
人工智能·小程序
说私域3 小时前
电商栏目细分与定制开发开源AI智能名片S2B2C商城小程序:洞察力与执行力的协同共进
人工智能·小程序
码海扬帆:前端探索之旅4 小时前
小程序开发指南(四)(UI 框架整合)
ui·微信小程序·小程序
lumi.5 小时前
Swiper属性全解析:快速掌握滑块视图核心配置!(2.3补充细节,详细文档在uniapp官网)
前端·javascript·css·小程序·uni-app
咸虾米_6 小时前
解决getLocation获取当前的地理位置,报错:getLocation:fail auth deny及方法封装
微信小程序·uniapp·用户授权api
低代码布道师6 小时前
少儿舞蹈小程序需求规格说明书
低代码·小程序·规格说明书