资讯专栏INFORMATION COLUMN

小程序左滑删除如何实现

ChristmasBoy / 2074人阅读

摘要:微信小程序如何实现左滑删除的功能呢左滑删除组件,基础库开始支持,如下图所示。

微信小程序如何实现左滑删除的功能呢

https://developers.weixin.qq....

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/slideview.html

Slideview
左滑删除组件,基础库 2.4.4 开始支持,如下图所示。

引入组件
在 page.json 中引入组件

{
  "usingComponents": {
    "mp-slideview": "../../components/slideview/slideview",
    "mp-cells": "../../components/cells/cells",
    "mp-cell": "../../components/cell/cell"
  }
}
示例代码


    
    
        标题文字(使用slot)
        说明文字
    
    
        
    
    
        
    

// page.js示例代码
Page({
    onLoad: function(){
        this.setData({
            icon: base64.icon20,
            slideButtons: [{
              text: "普通",
              src: "", // icon的路径
            },{
              text: "普通",
              extClass: "test",
              src: "", // icon的路径
            },{
              type: "warn",
              text: "警示",
              extClass: "test",
              src: "", // icon的路径
            }],
        });
    },
    slideButtonTap(e) {
        console.log("slide button tap", e.detail)
    }
});

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110323.html

相关文章

  • 程序滴滴车主板块的银行卡管理左滑删除编辑

    摘要:最近在类似于滴滴软件的一款小程序,工程确实有点大,很多东西都是第一次做。这次记录一下关于左滑删除的一个代码记录。主要的思想就是计算滑动距离的大小来使用中的控制滑动的效果,主流的都是控制边距来达到左滑的效果。当然的控制也是很重要的最近在类似于滴滴软件的一款小程序,工程确实有点大,很多东西都是第一次做。这次记录一下关于左滑删除的一个代码记录。主要的思想就是计算滑动距离的大小来使用css中的 tr...

    番茄西红柿 评论0 收藏0
  • 程序开发:左滑删除

    摘要:,上层使用绝对定位,我们操纵属性的值来实现像左移动。,我们通过微信小程序提供的对象和个有关手指触摸的函数,,来实现随手指移动。省略数据删除部分中根据绑定的事件触发删除按钮,用户点击删除,发送请求,根据返回值对用户进行反馈。 导语 首先声明两点: 思路以及代码,是根据资料进行一些修改以及补充,原文地址在此 下面的只是 demo,各位根据自己的需要进行修改完善 实现的思路摘抄如下 1...

    missonce 评论0 收藏0
  • 微信程序左滑删除功能开发案例

    摘要:当我们手指向左滑动时,容器向左移动此时从容器之后显示出来换句话说我们喜欢容器盖住,使默认在上方。接着我们给元素添加,这样它就能获得移动的距离。详细案例请搜索微信小程序魔都源码地址 直接进入正题,我们需要做的就是通过手指滑动列表项后,右侧出现删除;比如说像这样:showImg(https://segmentfault.com/img/remote/1460000017022935); 向...

    sydMobile 评论0 收藏0
  • 微信程序——商城篇

    摘要:微信小程序之跳转在进入商品详情页以后,点击左下角的图标原应该跳转到首页,但是一直点也不跳,而且也不报错。放下效果图微信小程序购物车购物车页面逻辑的话,要按业务需求来。 前言 随着wepy和mpvue的出现及流行,开发小程序变的越来越便捷和强大,作为基佬社区的一份子,我们都需要把自己遇到的问题以及如何解决的方式相互分享,这样才能帮助到更多的朋(ji)友(lao)。如有写的不足的地方,请各...

    k00baa 评论0 收藏0
  • Vue.js移动端左滑删除组件

    摘要:移动端左滑删除组件左滑删除在移动端很常见。我们想要是当滑块没有超过删除按钮的一半时自动回到起点位置。滑动距离超过一半滑动到最大值删除按钮宽度尽量精简代码在开始之前,我们先得将弄清楚了。 Vue.js移动端左滑删除组件 showImg(https://segmentfault.com/img/bVUzBL?w=527&h=148); 左滑删除在移动端很常见。下面我们一起来封装一下这个简单...

    developerworks 评论0 收藏0

发表评论

0条评论

ChristmasBoy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<