• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序 WeUI·Slideview

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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-classstring添加在组件内部结构的class,可用于修改组件内部的样式
disablebooleanfalse是否禁用slideview
buttonsarray<object>[]左滑的按钮组,建议最多3个按钮
iconbooleanfalse按钮是否是icon
showboolean是否显示slideview,可以控制隐藏显示
durationboolean350slideview显示隐藏的动画的时长
throttlenumber40手指移动距离超过该值的时候,触发slideview的显示隐藏
bindbuttontapeventhandlerbuttons按钮组点击时触发的事件,detail为{index, data},data是按钮的配置项传入的data参数
bindhideeventhandler隐藏时触发的事件
bindshoweventhandler显示时触发的事件

buttons提供按钮组配置,每一项表示一个按钮,每一项的属性为

属性类型默认值必填说明
extClassstring按钮的额外的class,可用于修改组件内部的样式
typestringdefault按钮的类型,取值default和warn,warn是红色按钮
textstring按钮的文本
srcstring如果icon为true,此属性有效
dataany触发bindbuttontap回传的数据



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序 WeUI·Uploader发布时间:2022-02-02
下一篇:
微信小程序 WeUI·Checkbox-group发布时间:2022-02-02
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap