滑动菜单组件,常用于左滑删除或更多操作。
效果
使用方法
<template>
<div class="lc-demo">
<title title="lc-swipe-cell"></title>
<div>
<scroller>
<category title="简单滑动菜单-手势向左边滑动,菜单按钮操作"></category>
<lc-swipe-cell @actionClick="clickmenu"
@swipeleft="swipeleft"
@swiperight="swiperight"
:items="btnAry1"
:title="'腾讯新闻-今日头条'"></lc-swipe-cell>
<category title="滑动菜单-高度设置"></category>
<lc-swipe-cell @actionClick="clickmenu"
:height="'150px'"
:items="btnAry1"
:title="'腾讯新闻-今日头条'"></lc-swipe-cell>
<category title="场景1-组件扩展案例"></category>
<lc-swipe-cell :items="btnAry1"
:title="'腾讯新闻-今日头条'"
@wrapClick="fn">
<text slot="content">--腾讯新闻-今日头条--</text>
</lc-swipe-cell>
<category title="场景2-与列表结合案例"></category>
<div v-for="(i, index) in items" :key="index">
<lc-swipe-cell :index="index" :hasArrow="true" :items="btnAry" :title="i.title" @actionClick="clickmenu1"></lc-swipe-cell>
</div>
</scroller>
</div>
</div>
</template>
<script>
import Light from 'light';
import Title from 'lighting-ui/packages/_mods/title.vue';
import Category from 'lighting-ui/packages/_mods/category.vue';
import LcSwipeCell from 'lighting-ui/packages/lc-swipe-cell';
var animation = Light.requireModule('animation');
var modal = Light.requireModule('modal')
export default {
components: { Title, Category, LcSwipeCell },
data() {
return {
btnAry1: [
{
'title': '取消',
'bgcolor' : '#c6c7c8'
},
{
'title': '标记',
'bgcolor' : '#3399ff'
}
],
btnAry: [
{
'title': '取消',
'bgcolor' : '#c6c7c8'
},
{
'title': '删除',
'bgcolor' : '#fa3300'
},
{
'title': '标记',
'bgcolor' : '#3399ff'
}
],
items: [
{
'title':'腾讯新闻'
},
{
'title':'网易新闻'
},
{
'title':'新浪微博'
}
]
}
},
methods: {
fn(){
modal.toast({message: "点击click",duration: 0.5})
},
clickmenu(e){
if(e == 0){
modal.toast({message: this.btnAry1[e-0].title,duration: 0.5})
}else if(e == 1){
modal.toast({message: this.btnAry1[e-0].title,duration: 0.5})
}
},
clickmenu1(e,i){
if(e == 0){
modal.toast({message: i+this.btnAry[e-0].title,duration: 0.5})
}else if(e == 1){
modal.toast({message: i+this.btnAry[e-0].title,duration: 0.5})
}
else if(e == 2){
modal.toast({message: i+this.btnAry[e-0].title,duration: 0.5})
}
},
swipeleft(){
modal.toast({message: '左滑了',duration: 0.5})
},
swiperight(){
modal.toast({message: '右滑了',duration: 0.5})
}
}
}
</script>
<style scoped>
</style>
可配置参数
Prop | Type | Required | Default | Description |
---|---|---|---|---|
items | array |
Y |
- |
滑动菜单按钮数据项(注1) |
title | string |
N |
- |
左边标题内容 |
height | string |
N |
100px |
高度 |
index | Number |
N |
- |
多条循环时的索引值 |
hasArrow | Boolean |
N |
false |
是否有右边箭头 |
注1:items: 赋值单选组数据列表,传一个数组,单个数组的属性如下:
- title:按钮文字
- bgcolor :按钮背景色
默认值如下:
[
{
'title': '取消',
'bgcolor' : '#c6c7c8'
},
{
'title': '删除',
'bgcolor' : '#fa3300'
}
]
事件回调
@actionClick:点击滑动菜单按钮触发的事件,返回按钮的index和列表的index
@wrapClick:点击滑动内容块触发的事件
@swipeleft: 向左滑动时触发的事件
@swiperight: 向右滑动时触发的事件