滑动菜单 (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: 向右滑动时触发的事件