Vue 使用 Mint UI 实现左滑删除效果CellSwipe

Mint UI 是饿了么开源的，基于 Vue.js 的移动端组件库。

关于Mint UI，有文档不够准确详尽，组件略显粗糙，功能不够完善等问题；也有高度组件化，体积小等优点。

安装Mint UI：

# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S

引入组件：

// 引入全部组件
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.use(Mint);
// 按需引入部分组件
import { CellSwipe } from 'mint-ui';
Vue.component(CellSwipe.name, CellSwipe);

从文档中摘录API，Slot如下：

代码示例：

<ul class="list">
 <li class="item" v-for="section in sectionList">
  <mt-cell-swipe
   :right="[
    {
     content: '删除',
     style: { background: '#ff7900', color: '#fff'},
     handler: () => deleteSection(section.PartId)
    }
   ]">
   <p class="section">{{section.PartName}}</p>
   <p class="teacher">{{section.TeacherName}}</p>
  </mt-cell-swipe>
 </li>
</ul>

:right可以定义不止一个按钮，也可以自行修改CellSwipe的默认样式

效果展示：

总结

以上所述是小编给大家介绍的Vue 使用 Mint UI 实现左滑删除效果CellSwipe，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue.js移动端左滑删除组件的实现代码

    Vue.js移动端左滑删除组件的实现代码

    左滑删除在移动端很常见.下面我们一起来封装一下这个简单的小组件.我们想要是: 当滑块没有超过删除按钮的一半时自动回到起点位置. 滑动距离超过一半滑动到最大值(删除按钮宽度) 尽量精简代码 效果如下: 在开始之前,我们先得将 [touchEventApi][1]弄清楚了.这个小组件中,用到了: 1.  TouchEvent.touches (表示一 个 TouchList 对象,包含了所有当前接触触摸平面的触点的Touch对象) 2.  TouchEvent.changedTouches (一个

  • mpvue小程序仿qq左滑置顶删除组件

    mpvue小程序仿qq左滑置顶删除组件

    背景: 前几天,公司的一个小程序项目开发的时候,遇到了一点点问题.设计师这狗币要让我在小程序上实现类似QQ左滑置顶删除的操作,心里mmp,我就是一个刚来公司三天的小小前端实习生而已,我想学习....当然刚刚来就被公司委以重任,也能看出本人技术过人,尤其是作为一个大二刚刚结束的学生来说.废话不多说,对于这个功能,第一反应就是百度,不百度不得了,一百度吓一跳.前辈们也来都做过."那我不是直接照搬就行,开心".开开心心的用mpvue上手之后,心里mmp,mpvue的坑这么多....还不如自己

  • vue仿ios列表左划删除

    vue仿ios列表左划删除

    本文实例为大家分享了vue仿ios列表左划删除的具体代码,供大家参考,具体内容如下 效果: 代码: <template> <div class="delete"> <div class="slider"> <div class="content" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style=&quo

  • 基于vue2实现左滑删除功能

    基于vue2实现左滑删除功能

    左滑删除,很多UI框架里有,比如Mint-UI, Muse-UI等,一开始我们就是用的这两个,但是我们需求是要:左滑的时候出现img然后来实现点击删除,如下: 因为用UI框架,还得改底层代码= =所以,我们小组就直接写了一个- -,心累--此组件多地方使用,所以建议还是放到common下.. <template> <div class="left-delete"> <div class="move" @touchstart="

  • 基于vue中对鼠标划过事件的处理方式详解

    鼠标事件进行监听 需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层 翻阅了一些博客,发现好多都提到了mouse事件,如mouseover.mouseout.mouseenter.mouseleave,在之后我自己也通过这种方法进行了尝试. <template> <el-table :data="tableData" stripe style="width: 100%&

  • vue 左滑删除功能的示例代码

    最近有个需求是要添加一个左滑删除的功能.参考了一下别的老哥的代码,做了一点点改进.记录一下.以备不时之需,话不多说 ,上代码 <template> <div class="slider-item"> <div class="content" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="deleteSlider"

  • Vue 仿QQ左滑删除组件功能

    前几天在做Vue项目开发的时候,因为之前别人写的代码有点小 bug,有人反应 IOS 上面的滑动点击有点问题,于是让我来帮忙解决,我看了看以前的代码实现比较繁琐,冗余,索性就直接自己重新写了一套,供大家参考,如有更好的方式,欢迎及时交流~ 我们先看看效果图吧,毕竟无图无真相啊~ 效果图 实现思路 具体实现思路如下: 布局方面我采用的是 rem + flex 布局,具体如何结构和样式可以参考我的代码,值得注意的是后面的删除按钮是我通过定位放在了每一行的最后,超出隐藏了而已 左滑和右滑是通过 tou

  • 使用Vue实现移动端左滑删除效果附源码

    左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 今天我给大家介绍的移动端左滑删除效果是基于Vue2实现的,结合以电商平台的删除购物车商品为例,来看实现步骤. 准备 安装vue项目过程已忽略,如果不懂vue的同学可以上官网看下:https://cn.vuejs.org/v2/guide/installation.html#NPM 我们使用安装一个

  • Vue 使用 Mint UI 实现左滑删除效果CellSwipe

    Mint UI 是饿了么开源的,基于 Vue.js 的移动端组件库. 关于Mint UI,有文档不够准确详尽,组件略显粗糙,功能不够完善等问题:也有高度组件化,体积小等优点. 安装Mint UI: # Vue 1.x npm install mint-ui@1 -S # Vue 2.0 npm install mint-ui -S 引入组件: // 引入全部组件 import Mint from 'mint-ui'; import 'mint-ui/lib/style.css' Vue.use(

  • 微信小程序uniapp实现左滑删除效果(完整代码)

    微信小程序uniapp实现左滑删除效果(完整代码)

    微信小程序uniapp实现左滑删除效果 实现效果 1,列表中侧滑删除 2,删除不同时存在 3,上下滑动与侧滑删除不影响 在本页面引入组件并使用 (文件在文章的最下方附上) 在需要左滑删除的地方使用 <view v-for="(item, index) in csListArrl" :key="index" :data-index="index"> <delSlideLeft :item="item" :dat

  • 微信小程序左滑删除效果的实现代码

    微信小程序左滑删除效果的实现代码

    今天我们说下微信小程序左滑删除效果的实现,现在市场上很多APP都在使用这个效果,一个listView页面,向左滑动一条item时,右侧会出现一个删除或者其他的选项,用户体验非常好,操作起来十分方便,今天我们使用微信小程序来实现这个效果....... 先看效果 要实现的效果: 1,当向左滑动时,item跟随手指像左移动,同时右侧出现两个可点击的按钮 2,当滑动距离大于按钮宽度一半松开手指时,item自动滑动到左侧显示出按钮,小于一半时item自动回到原来的位置,隐藏按钮. 思路: 1,首先页面每个

  • 小程序实现左滑删除效果

    小程序实现左滑删除效果

    本文实例为大家分享了小程序实现左滑删除效果的具体代码,供大家参考,具体内容如下 1.movable-area基本概念 实现思路: 大家仔细去看看官网的文档后再来看我写的这篇文章可能会更好理解. (1)movable-area这个就是定义了一个移动的区域,跟普通的<view></view>的含义是一样的,不同在于,接着往下看: 注意:movable-area 必须设置width和height属性,不设置默认为10px (2)movable-view这个就是一个可移动的视图容器,可以在

  • 微信小程序实现左滑删除效果

    微信小程序实现左滑删除效果的具体代码,供大家参考,具体内容如下 .wxml <scroll-view scroll-y="{{isScroll}}" style='width:{{windowWidth}}px;height:{{windowHeight}}px'> <block wx:key="item" wx:for="{{data}}"> <view data-index='{{index}}' class=&

  • 微信小程序实现列表项左滑删除效果

    微信小程序实现列表项左滑删除效果

    本文实例为大家分享了微信小程序实现列表项左滑删除效果的具体代码,供大家参考,具体内容如下 效果 图片 WXML <view class="container"> <!-- 收货地址 --> <view class="address"> <view class="left"> <view class="icon"> <image src="../../i

  • Android仿QQ左滑删除置顶ListView操作

    Android仿QQ左滑删除置顶ListView操作

    最近闲来无事,于是研究了一下qq的左滑删除效果,尝试着实现了一下,先上效果图: 大致思路原理: - 通过设置margin实现菜单的显示与隐藏 - 监听onTouchEvent,处理滑动事件 上代码 import android.content.Context; import android.util.AttributeSet; import android.util.DisplayMetrics; import android.view.MotionEvent; import android.v

  • Android使用PullToRefresh完成ListView下拉刷新和左滑删除功能

    Android使用PullToRefresh完成ListView下拉刷新和左滑删除功能

    ListView下刷新刷功能相信从事Android开发的猿友们并不陌生,包括现在Google亲儿子SwipeRefreshLayout实现效果在一些APP上也能看见(不过个人不喜欢官方的刷新效果).本文就带领一些刚入门android的朋友或者一起爱分享的朋友来简单的实现ListView的下拉刷新和左滑删除效果. 一.本文主要内容: 使用PullToRefresh完成ListView下拉.上拉刷新: 扩展PullToRefresh完美的实现ListView左滑删除效果: 注意:本文中的PullTo

随机推荐