• 滑动菜单 (bui-swipe-cell)
    • 用法
    • 属性
    • 事件

    滑动菜单 (bui-swipe-cell)

    滑动菜单(bui-swipe-cell) - 图1   滑动菜单(bui-swipe-cell) - 图2

    用法

    1. <text class="h4 titleEx">简单滑动菜单-手势向左边滑动,菜单按钮操作</text>
    2. <bui-swipe-cell @actionClick="clickmenu"
    3.                 :items="btnAry1"
    4.                 :title="'腾讯新闻-今日头条'"></bui-swipe-cell>
    5. <text class="h4 titleEx mT50">滑动菜单-高度设置</text>
    6. <bui-swipe-cell @actionClick="clickmenu"
    7.                 :height="'150px'"
    8.                 :items="btnAry1"
    9.                 :title="'腾讯新闻-今日头条'"></bui-swipe-cell>
    10. <text class="h4 titleEx mT50">场景1-组件扩展案例</text>
    11. <bui-swipe-cell :items="btnAry1"
    12.                 :title="'腾讯新闻-今日头条'">
    13.     <text slot="content">--腾讯新闻-今日头条--</text>
    14. </bui-swipe-cell>
    15. <text class="h4 titleEx mT50">场景2-与列表结合案例</text>
    16. <div v-for="(i, index) in items" :key="index">
    17.     <bui-swipe-cell :items="btnAry"
    18.                     :title="i.title"></bui-swipe-cell>
    19. </div>
    1. data: function () {
    2.     return {
    3.         btnAry1: [
    4.             {
    5.                 'title': '取消',
    6.                 'bgcolor' : '#c6c7c8'
    7.             },
    8.             {
    9.                 'title': '标记',
    10.                 'bgcolor' : '#3399ff'
    11.             }
    12.         ],
    13.         btnAry: [
    14.             {
    15.                 'title': '取消',
    16.                 'bgcolor' : '#c6c7c8'
    17.             },
    18.             {
    19.                 'title': '删除',
    20.                 'bgcolor' : '#fa3300'
    21.             },
    22.             {
    23.                 'title': '标记',
    24.                 'bgcolor' : '#3399ff'
    25.             }
    26.         ],
    27.         items: [
    28.             {
    29.                 'title':'行无止尽'
    30.             },
    31.             {
    32.                 'title':'柠檬'
    33.             },
    34.             {
    35.                 'title':'樊登读书会'
    36.             },
    37.             {
    38.                 'title':'云应用平台'
    39.             }
    40.         ]
    41.     }
    42. },
    43. methods: {
    44.     clickmenu(e){
    45.         if(e == 0){
    46.             this.$toast(this.btnAry1[e-0].title);
    47.         }else if(e == 1){
    48.             this.$toast(this.btnAry1[e-0].title);
    49.         }
    50.     }
    51. }

    Example:bui-swipe-cell

    属性

    Prop Type Required Default Description
    items array Y 滑动菜单按钮数据项
    title string N 左边标题内容
    height string N 100px 高度

    items: 赋值单选组数据列表，传一个数组，单个数组的属性如下：

    • title ：按钮文字

    • bgcolor ：按钮背景色

      默认值如下：

      1. [
      2. {
      3.     'title': '取消',
      4.     'bgcolor' : '#c6c7c8'
      5. },
      6. {
      7.     'title': '删除',
      8.     'bgcolor' : '#fa3300'
      9. }
      10. ]

    事件

    • @actionClick:点击滑动菜单按钮触发的事件，返回按钮的index
    • @click:点击滑动内容块触发的事件
    • @swipeleft: 向左滑动时触发的事件
    • @swiperight: 向右滑动时触发的事件