• 滑动菜单 SlideView
    • 基础案例
      • 示例代码
    • 自定义阈值
    • 自动关闭与主动关闭
    • 滑动菜单属性(SlideView Attributes)
    • 滑动菜单事件 (SlideView Events)

    滑动菜单 SlideView

    可通过滑动显示操作菜单。

    基础案例

    滑动菜单分为两个部分组成,一是在未滑动时看到的部分(如下图)

    未滑动

    二是在滑动时可见的部分(如下图的操作菜单部分)。

    未滑动

    两者都是通过添加 slot 子节点来完成的。

    因为 SlideView 组件较之前的组件较为特殊,这里会做一个说明,以供参考。

    注意事项

    • 为保证 SlideView 正常显示,我们需要设置 SlideViewheightwidth 属性。
    • 同时,我们需要传入两个slot 子节点,并且用 slot="right"slot="left" 给子节点命名。(lfet 代表的是可见部分,right代表的是需要滑动时才可见的操作菜单部分)
    • 标有 slot="right"的子节点的宽度要与组件的 slide-width 属性值相等。

    示例代码

    1. <l-slide-view height="140" width="750" slide-width="340" >
    2. <view slot="left" class="left">
    3. <view class='left-con'>
    4. <text class='left-title'>购买运动器材</text>
    5. <text class='left-time'>10-26 18:50</text>
    6. </view>
    7. <view class='left-price'><text style="color:rgba(244,81,108,1);">-</text> $2499</view>
    8. </view>
    9. <view slot="right" class="right">
    10. <text>喜欢</text>
    11. <text>分享</text>
    12. <text>删除</text>
    13. </view>
    14. </l-slide-view>

    如下图:slideView

    自定义阈值

    阈值是指当我们左滑或则右滑多少rpx时会触发 SlideView 开关的值。

    SlideView 默认的阈值是 1/2 的操作菜单宽度,当然,为了不同宽度操作菜单能有更丝滑的体验,我们也提供自定义阈值,可以通过 threshold 属性来设置,单位是rpx。

    自动关闭与主动关闭

    我们除了滑动触发 SlideView 的关闭外,还可以通过另外两种方式来关闭它。

    注意事项

    • 设置 auto-closetrue 时, 我们点击了菜单栏部分,组件会自动关闭;
    • 设置 closetrue 时,组件会主动关闭。

    滑动菜单属性(SlideView Attributes)

    参数说明类型可选值默认值
    width组件显示区域的宽度,不包含菜单栏部分,单位rpxNumber750
    height组件显示区域的宽度,不包含菜单栏部分,单位rpxNumber100
    slide-width组件滑动显示区域(菜单栏)的宽度,单位rpxNumber0
    threshold触发组件菜单栏打开和关闭的阈值,单位rpxNumber菜单栏宽度/2
    disabled设置是否禁用Booleantrue/falsefalse
    auto-close设置点击菜单栏后是否自动关闭Booleantrue/falsefalse
    close设置是否主动关闭菜单栏Booleantrue/falsefalse

    滑动菜单事件 (SlideView Events)

    事件名称说明返回值备注
    bind:lintap点击菜单栏时触发click right-
    bind:slideopen菜单栏打开时触发true-
    bind:slideclose菜单栏关闭时触发false-