微信小程序Slideview和cell

微信小程序Slideview和cell的用法和使用:

提示:左滑删除组件,基础库 2.4.4 开始支持:


使用方法:

微信UI扩展组件库基于小程序自定义组件构建,在使用扩展组件库之前要在全局json中引入扩展库.
(1)这里我们通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入代码包大小

{
  "useExtendedLib": {
    "kbone": true,
    "weui": true
  }
}
(2)然后就可以在 页面.json 中引入模块组件(和自定义组件一样):
{
  "usingComponents": {
    "mp-slideview": "weui-miniprogram/slideview/slideview",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell"
  }
}
(3)然后在 页面.wxml 中写入模块:
<mp-slideview buttons="{{slideButtons}}" bindbuttontap="slideButtonTap">
  <mp-cell >
    <view slot="icon">左侧图标</view>
    <view slot="">内容</view>
    <view slot="footer">右侧区域slot</view>
  </mp-cell>
</mp-slideview>
(4)最后在 页面.js中写入配置:
Page({
    onLoad: function(){
        this.setData({
            slideButtons: [{
              text: '普通',
            },{
              text: '普通',
              extClass: 'test',
            },{
              type: 'warn',
              text: '警示',
              extClass: 'test',
            }],
        });
    },
    slideButtonTap(e) {
        console.log('slide button tap', e.detail)
    }
});
最后这是效果图:

在这里插入图片描述
左滑效果:
在这里插入图片描述

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值