本文整理自网络,侵删。
Slideview
左滑删除组件,基础库 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)
}
});
相关阅读 >>
微信小程序开发中 var that =this的用法以及意义
更多相关阅读请进入《微信小程序》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者