左滑删除组件,基础库 2.4.4 开始支持。
{
"usingComponents": {
"mp-cells": "../components/cells/cells",
"mp-cell": "../components/cell/cell",
"mp-slideview": "../components/slideview/slideview"
}
}
<view class="page">
<view class="page__hd">
<view class="page__title">Slideview</view>
<view class="page__desc">左滑操作</view>
</view>
<view class="page__bd">
<view class="weui-cells">
<mp-slideview buttons="{{slideButtons}}" bindbuttontap="slideButtonTap">
<mp-cell value="左滑可以删除" footer="说明文字"></mp-cell>
</mp-slideview>
</view>
<view class="weui-slidecells">
<mp-slideview buttons="{{slideButtons}}" icon="{{true}}" bindbuttontap="slideButtonTap">
<view class="weui-slidecell">
左滑可以删除(图标Button)
</view>
</mp-slideview>
</view>
</view>
</view>
var base64 = require("../images/base64");
Page({
onLoad: function(){
this.setData({
icon: base64.icon20,
slideButtons: [{
text: "普通",
src: "/page/weui/cell/icon_love.svg", // icon的路径
},{
text: "普通",
extClass: "test",
src: "/page/weui/cell/icon_star.svg", // icon的路径
},{
type: "warn",
text: "警示",
extClass: "test",
src: "/page/weui/cell/icon_del.svg", // icon的路径
}],
});
},
slideButtonTap(e) {
console.log("slide button tap", e.detail)
}
});
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
ext-class | string | 否 | 添加在组件内部结构的class,可用于修改组件内部的样式 | |
disable | boolean | false | 否 | 是否禁用slideview |
buttons | array<object> | [] | 是 | 左滑的按钮组,建议最多3个按钮 |
icon | boolean | false | 否 | 按钮是否是icon |
show | boolean | 否 | 是否显示slideview,可以控制隐藏显示 | |
duration | boolean | 350 | 否 | slideview显示隐藏的动画的时长 |
throttle | number | 40 | 否 | 手指移动距离超过该值的时候,触发slideview的显示隐藏 |
bindbuttontap | eventhandler | 否 | buttons按钮组点击时触发的事件,detail为{index, data},data是按钮的配置项传入的data参数 | |
bindhide | eventhandler | 否 | 隐藏时触发的事件 | |
bindshow | eventhandler | 否 | 显示时触发的事件 |
buttons提供按钮组配置,每一项表示一个按钮,每一项的属性为
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
extClass | string | 否 | 按钮的额外的class,可用于修改组件内部的样式 | |
type | string | default | 否 | 按钮的类型,取值default和warn,warn是红色按钮 |
text | string | 否 | 按钮的文本 | |
src | string | 否 | 如果icon为true,此属性有效 | |
data | any | 否 | 触发bindbuttontap回传的数据 |
服务平台 API2.9.4API 均在wx.serviceMarket对象下。invokeService方法可以通过兼容性配置,无需依赖2.9.4即可使用,配置方法见...
本指南将概述可用于创建文档的不同设计元素。#警告VuePress 提供了一个自定义容器插件来创建警稿框。有四种类型:Info:提供中立...
#data类型:Function详细:返回组件实例的 data 对象的函数。在 data 中,我们不建议观察具有自身状态行为的对象,如浏览器 API ...
无论如何,不要跳过这一节。阅读这一章将提高你的技能,减轻你网页的重量,让你更清楚地了解标记和设计之间的区别。本章中的概念...