后浪云小程序教程：微信小程序 WeUI·Slideview

2022-7-3

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)
    }
});

属性列表

属性	类型	默认值	必填	说明
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回传的数据

作者：后浪云

链接：https://www.idc.net/help/184997/

文章版权归作者所有，未经允许请勿转载。

THE END