如何在快应用中实现滑动操作组件
1. 什么是滑动操作组件
在实际的移动应用程序交互方式中，最常见的就是滑动操作。像左右滑动切换页面，手指张开来放大图片等，都是由滑动操作来完成的。本文滑动操作组件是指通过手势滑动呼出隐藏的操作按钮。
如下图所示：
以上滑动操作组件具有如下特点：
- 左右滑动均支持，滑动可呼出、隐藏操作按钮栏；
- 操作按钮可配置多个；
- 操作按钮可设置背景色、字体、宽度等；
- 点击操作按钮，可隐藏操作栏；
- 呼出操作栏时，界面所有的UI元素都相应移动；
2 基本实现
2.1 滑动操作组件化设计
定义支持滑动操作的组件swipe_item,父组件引用，引用时传递操作按钮、操作按钮样式。滑动操作子组件需要实现手势滑动处理。
代码结构如下：
<import name="swipeitem" src="../Component/swipe_item.ux"></import>
<template>
<div class="container">
<swipeitem right-options="{{rightBtns}}" left-options="{{leftBtns}}" @swipebtnclick="swipeItemClick">
<text>左右都有混合滚动</text>
</swipeitem>
</div>
</template>
2.2子组件swipe_item属性设计
2.3支持的属性
|
属性 |
类型 |
是否必选 |
默认值 |
描述 |
|
identity |
Number |
否 |
组件唯一标识，当autoClose为true时，必须要设置 |
|
|
disabled |
Boolean |
否 |
false |
是否禁止滑动 |
|
autoClose |
Boolean |
是 |
true |
滑动打开当前组件，是否关闭其他组件 |
|
threshold |
Number |
否 |
30 |
滑动缺省距离 |
|
leftOptions |
Array[Option] |
否 |
左侧操作栏内容及样式 |
|
|
rightOptions |
Array[Option] |
否 |
右侧操作栏内容及样式 |
Option对象参数如下：
|
属性 |
类型 |
是否必选 |
描述 |
|
txt |
String |
否 |
按钮文字 |
|
style |
Object |
是 |
按钮样式 |
style对象参数如下：
|
属性 |
类型 |
是否必选 |
描述 |
|
backgroundColor |
Color |
否 |
按钮背景色 |
|
txtColor |
Color |
否 |
按钮颜色 |
|
fontsize |
Number |
否 |
文字大小 |
|
btnwidth |
Number |
是 |
按钮宽度 |
支持的事件
|
事件名称 |
事件传递参数 |
描述 |
|
swipebtnclick |
{clickIndex：1, position:left|right, btnValue:btnText} |
点击操作栏按钮时触发事件； clickIndex：左或右操作栏上点击的按钮数组索引； position：所点击的操作栏位置，参数值有left和right； btnValue：所点击的按钮文字； |
|
centerclick |
{} |
点击显示在屏幕中间内容时触发事件 |
|
swipestatechange |
{isOpened:true|false} |
操作栏打开或关闭时触发 |
2.4 swipe_item子组件布局
- 布局结构：由左侧操作栏+中间屏幕显示内容+右侧操作栏组成的横向div；
- 左侧操作栏、右侧操作栏都是基于leftOptions、rightOptions操作选项内容数组，采用用for循环形成横向布局渲染；
- 中间在屏幕内显示内容是动态变化的，每个产品要显示的内容和UI是不同的，所以采用了slot插槽，由使用swipe_item组件的页面来完成中间内容的布局。
- 中间布局宽度需设置整个屏幕的宽度，即750px；
2.5 swipe_item子组件css
- 宽度：虽然滑动操作组件在初始状态下左右操作栏都是隐藏的，但是实际属于整个布局的一部分，如果不能正确计算根节点的宽度，会导致滑动的时候，操作栏上无内容。
- 动画：初始状态下，需要满足左右操作栏都是隐藏的，只有中间内容是可见的。正常布局下（见图3），左操作栏是显示的，所以使用了transform动画样式，将根节点平移左操作栏宽度的距离，这样就确保初始状态下操作栏都是隐藏的。
- 按鈕背景色、文字大小、文字顔色： 如果父组件没有设置，子组件设置默认的值，见图4；
|
|
|
|
图3 正常布局效果 |
图4 操作栏按钮默认背景色效果 |
2.6 手势滑动
监听手势touchstart、touchmove、touchend事件，计算手指滑动像素，同时调用X轴的平移动画animate方法，实现组件的移动效果。
- touchstart：记录起始触摸点；
- touchmove：滑动距离ds>0 表示手指向右滑动，反之向左滑动，滑动过程中调用animate()移动组件，达到打开或者隐藏操作栏的效果；如果滑动距离小于阈值threshold，不触发移动效果；如果禁止滑动即disabled值为true时，也不能触发滑动效果；
- touchend：滑动结束时触发，调用animate()控制操作栏最终显示位置，需要计算准确，防止组件移动过远或者过近，从而UI效果异常。
2.8 父子组件通信
当点击子组件操作栏上的按钮时，需要父组件处理业务逻辑，通过$emit()向父组件发送通知。注意，不要在子组件中处理业务逻辑，否则代码无法维护。
1） 操作栏按钮点击事件通知
- 页面调用子组件时，监听swipebtnclick事件；
- 子组件调用$emit()向页面发送通知；
2）中间内容部分点击事件通知
- 页面调用子组件时，监听centerclick事件；
- 当操作栏处于打开状态时，点击中间部分效果是隐藏操作栏。只有操作栏处于隐藏状态时，点击中间部分时，子组件调用$emit()向页面发送通知，页面自行处理业务逻辑，比如打开新的页面。
3）操作栏打开、关闭事件通知
- 页面调用子组件时，监听swipestatechange事件；
- 当操作栏处于打开或者关闭状态时，子组件调用$emit()向页面发送通知。
相关代码如下：
2.9 autoClose实现
滑动打开当前组件时，是否关闭其他组件，当autoClose设置为true时，identity属性必须设置，且唯一标识当前子组件。
- 当子组件1操作栏打开时，通过$emit()向页面发送状态事件swipestatechange；
- 父组件监听swipestatechange事件，通过$broadcast()方法向子组件发送关闭通知事件closeSwipeItem，通知其他子组件2,3,4等要关闭已经打开的操作栏；
- 子组件1,2,3,4等监听关闭closeSwipeItem事件，在事件句柄中处理关闭逻辑，注意操作栏打开的子组件1也会收到关闭事件，此处我们需要判断identity值，确保最新打开的子组件1不会出现打开又关闭的现象。
3总结
- 学习和熟悉快应用子组件的设计和属性定义；
- 学习和熟悉快应用手势事件；
- 学习和熟悉快应用动画；
- 注意滑动操作子组件swipe_item在list-item中不生效。
4代码附录
滑动操作子组件swipe_item.ux
<template>
<!-- Only one root node is allowed in template. -->
<div class="container" style="{{containerStyle}}" >
<div id="swipe_item" class="swipe" ontouchstart="dealTouchStart" ontouchmove="dealTouchMove" ontouchend="dealTouchEnd" >
<div class="left" id="leftbtns">
<block for="(index,item) in leftOptions">
<input type="button" class="btn"
style="background-color: {{calBtnBgColor(item.style.backgroundColor)}};
color:{{calBtnTxtColor(item.style.txtColor)}};
font-size:{{calBtnFontSize(item.style.fontsize)}}px;width:{{item.style.btnwidth}}px;"
value="{{item.txt}}" onclick="btnsClick(index,'left',item.txt)">
</input>
</block>
</div>
<div class="center" style="width:{{deviceLogicWidth}}px" onclick="dealClickCenter">
<slot ></slot>
</div>
<div class="right" id="rightbtns">
<block for="(index,item) in rightOptions">
<input type="button" class="btn"
style="background-color: {{calBtnBgColor(item.style.backgroundColor)}};
color:{{calBtnTxtColor(item.style.txtColor)}};
font-size:{{calBtnFontSize(item.style.fontsize)}}px;width:{{item.style.btnwidth}}px;"
value="{{item.txt}}" onclick="btnsClick(index,'right',item.txt)">
</input>
</block>
</div>
</div>
</div>
</template>
<style>
.container {
flex-direction: column;
justify-content: center;
}
.swipe {
flex-direction: row;
align-items: center;
}
.txt {
font-size: 40px;
width: 100%;
height: 100%;
}
.btn {
height: 100%;
}
.left {
flex-direction: row;
flex-shrink: 0;
height: 100%;
background-color: #a9a9a9;
}
.center {
flex-direction: row;
align-items: center;
padding: 16px;
flex-shrink: 0;
}
.right {
flex-direction: row;
flex-shrink: 0;
height: 100%;
background-color: #a9a9a9;
}
</style>
<script>
import device from '@system.device';
const defaultBtnBg="#f01f1f";
const defaultBtnFontSize=32;
const defaultBtnTxtColor="#dcdcdc";
module.exports = {
props: {
// 禁用
disabled: {
type: Boolean,
default: false
},
identity:{
type: String,
default: '0',
},
// 是否自动关闭
autoClose: {
type: Boolean,
default: true
},
// 滑动缺省距离
threshold: {
type: Number,
default: 30
},
// 左侧按钮内容
leftOptions: {
type: Array,
default() {
return []
}
},
// 右侧按钮内容
rightOptions: {
type: Array,
default() {
return []
}
}
},
data: {
movestartX: 0,
lastMoveX:0,
translateEndX: 0,
leftbtnsWidth: 0,
rightbtnsWidth: 0,
deviceLogicWidth:750,
isLeftOpened: false,
isRightOpened: false
},
computed: {
containerStyle() {
console.info("computed containerStyle begin")
var style = '';
let totalwidth=0;
let leftwidth=0;
this.leftOptions.forEach((item, index, array) => {
console.info("computed item="+JSON.stringify(item));
leftwidth+=item.style.btnwidth;
})
this.rightOptions.forEach((item, index, array) => {
totalwidth+=item.style.btnwidth;
})
totalwidth=totalwidth+this.deviceLogicWidth+leftwidth;
console.info("computed totawidth="+totalwidth+", left width="+leftwidth);
style += 'width:' + totalwidth + 'px;'
style += 'transform: translateX(-' + leftwidth + 'px);'
return style;
}
},
calBtnBgColor(color){
if(color!==undefined){
return color;
}
return defaultBtnBg;
},
calBtnFontSize(size){
if(size!==undefined){
return size;
}
return defaultBtnFontSize;
},
calBtnTxtColor(color){
if(color!==undefined){
return color;
}
return defaultBtnTxtColor;
},
onInit() {
console.info("oninit()");
this.$on('closeSwipeItem', this.closeFromParent);
setTimeout(() => {
this.calWidth();
}, 500);
},
calWidth() {
this.calLeftBtnsWidth();
this.calRightBtnsWidth();
},
calLeftBtnsWidth() {
var that = this;
this.$element('leftbtns').getBoundingClientRect({
success(res) {
let msg = JSON.stringify(res);
console.log('calLeftBtnsWidth 当前坐标：' + msg);
// that.leftbtnsWidth = res.width;
that.convertRealPx(true, res.width);
},
fail() {
console.log('calBoxWidth 获取失败');
},
complete() {
console.log('calBoxWidth complete')
}
})
},
calRightBtnsWidth() {
var that = this;
this.$element('rightbtns').getBoundingClientRect({
success(res) {
let msg = JSON.stringify(res);
console.log('calRightBtnsWidth 当前坐标：' + msg);
// that.rightbtnsWidth = res.width;
that.convertRealPx(false, res.width);
},
fail() {
console.log('calBoxWidth 获取失败');
},
complete() {
console.log('calBoxWidth complete')
}
})
},
convertRealPx(isLeftWidth, data) {
var d = device.getInfoSync();
console.info("calBannerPostion1 d= " + JSON.stringify(d));
//获取页面内可见窗口的高度和宽度，此值不包括标题栏和状态栏高度
let windowWidth = d.windowWidth;
//logicWidth对应manifest.json文件设置的designWidth值，默认是750
let logicWidth = d.windowLogicWidth;
let result = data * 1.0 * windowWidth / logicWidth;
if (isLeftWidth) {
this.leftbtnsWidth = result;
} else {
this.rightbtnsWidth = result;
}
},
dealTouchStart: function (e) {
if (this.disabled) {
return;
}
this.movestartX = e.touches[0].clientX;
console.info("dealTouchStart movestartX="+this.movestartX);
},
dealTouchMove: function (e) {
if (this.disabled) {
return;
}
let moveX = e.touches[0].clientX;
let dis = moveX - this.movestartX;
console.info("dealTouchMove moveX= " + moveX + ", dis=" + dis);
if (Math.abs(dis) < this.threshold) {
return;
}
if (dis > 0) {
//右滑动呼出左边的按钮或者隐藏右边按钮恢复初始状态
if (this.isRightOpened) {
//隐藏右边的按钮，恢复初始状态
this.animate(dis-this.rightbtnsWidth, dis);
} else {
//右滑动，呼出左边的按钮
if (this.leftbtnsWidth > 0) {
if (!this.isLeftOpened) {
console.info("begin to show the left buttons");
this.animate(dis, dis);
}
}
}
}
else if (dis < 0) {
console.info("dealTouchMove left this.isLeftOpened=" + this.isLeftOpened);
if (this.isLeftOpened) {
//慢慢滑动将左边按钮隐藏
this.animate(this.leftbtnsWidth + dis, dis);
} else {
//呼出右边的按钮
if (this.rightbtnsWidth > 0) {
if (!this.isRightOpened) {
console.info("dealTouchMove begin to show the right buttons");
this.animate(dis, dis);
}
}
}
}
},
dealTouchEnd: function (e) {
if (this.disabled) {
return;
}
let endX = e.changedTouches[0].clientX;
let dis = endX - this.movestartX;
if (Math.abs(dis) < this.threshold) {
return;
}
console.info("dealTouchEnd dis=" + dis + ", endX=" + endX + ", isLeftOpened=" + this.isLeftOpened + ",isRightOpened=" + this.isRightOpened);
if (dis > 0) {
//往右边滑动
if (this.isRightOpened) {
//隐藏右边按钮
this.animate(dis - this.rightbtnsWidth, 0);
this.isRightOpened = false;
this.$emit('swipestatechange', {params: {"isOpened":false}});
} else {
if (!this.isLeftOpened) {
//呼出左边按钮，将左边按钮完整显示出来；
if (this.leftbtnsWidth > 0) {
this.animate(dis, this.leftbtnsWidth);
this.isLeftOpened = true;
this.$emit('swipestatechange', {params: {"isOpened":true}});
}
}
}
} else if (dis < 0) {
//往左滑动
if (this.isLeftOpened) {
//隐藏左边按钮
this.animate(this.leftbtnsWidth + dis, 0);
this.isLeftOpened = false;
this.$emit('swipestatechange', {params: {"isOpened":false}});
} else {
if (this.rightbtnsWidth > 0 && !this.isRightOpened) {
//呼出右边按钮，将右边按钮完整显示出来
this.animate(dis, -this.rightbtnsWidth);
this.isRightOpened = true;
this.$emit('swipestatechange', {params: {"isOpened":true}});
}
}
}
},
animate(value1, value2) {
console.info("aninate translateX from: " + value1 + ", to:" + value2);
let cmp = this.$element('swipe_item');
var options = {
duration: 300, easing: 'linear',
delay: 0,
fill: 'forwards'
}
console.info("dealTouchMove value2=" + value2);
var frames = [
{
transform: {
translateX: value1,
}
},
{
transform: {
translateX: value2,
}
}];
var animation = cmp.animate(frames, options);
animation.play();
animation.onfinish = function () {
console.log("animation onfinish");
}
animation.oncancel = function () {
console.log("animation oncancel");
}
},
btnsClick: function(index,direction,btnValue) {
console.info("swipe.ux item click direction="+direction);
this.$emit('swipebtnclick', {params: {"clickIndex":index,"position":direction,"btnValue":btnValue}});
//按钮关闭
if(direction=='left'){
this.animate(this.leftbtnsWidth, 0);
this.isLeftOpened = false;
}else{
this.animate( - this.rightbtnsWidth, 0);
this.isRightOpened = false;
}
this.$emit('swipestatechange', {params: {"isOpened":false}});
},
close:function() {
if(this.isLeftOpened){
//关闭
this.animate(this.leftbtnsWidth, 0);
this.isLeftOpened = false;
this.$emit('swipestatechange', {params: {"isOpened":false}});
}else if(this.isRightOpened){
//关闭
this.animate( - this.rightbtnsWidth, 0);
this.isRightOpened = false;
this.$emit('swipestatechange', {params: {"isOpened":false}});
}else{
//中间部分响应自身的点击事件
this.$emit('centerclick', {params: {}});
}
},
closeFromParent:function(e) {
console.info("closeFromParent e="+JSON.stringify(e));
if(!this.autoClose){
return;
}
//最新滑动打开的操作栏不关闭，其他的才关闭
let excludeCloseId=e.detail.exclude;
if(excludeCloseId==this.identity){
return;
}
if(this.isLeftOpened){
//关闭
this.animate(this.leftbtnsWidth, 0);
this.isLeftOpened = false;
}else if(this.isRightOpened){
//关闭
this.animate( - this.rightbtnsWidth, 0);
this.isRightOpened = false;
}
},
dealClickCenter: function() {
console.info("dealClickCenter");
this.close();
},
}
</script>
页面main.ux
<import name="swipeitem" src="../Component/swipe_item.ux"></import>
<template>
<!-- Only one root node is allowed in template. -->
<div class="container">
<div class="section">
<text class="sec_txt">只有左边</text>
</div>
<swipeitem identity='111' left-options="{{leftBtns}}" @swipebtnclick="swipeItemClick" @swipestatechange="swipeItemChange('111')">
<text>只有左边按钮</text>
</swipeitem>
<div class="section">
<text class="sec_txt">只有右边</text>
</div>
<swipeitem identity='112' right-options="{{rightBtns}}" @swipebtnclick="swipeItemClick" @swipestatechange="swipeItemChange('112')">
<text>只有右边按钮</text>
</swipeitem>
<div class="section">
<text class="sec_txt">混合滚动</text>
</div>
<swipeitem identity='113' right-options="{{rightBtns}}" left-options="{{leftBtns}}" @swipebtnclick="swipeItemClick" @swipestatechange="swipeItemChange('113')">
<text>左右都有混合滚动</text>
</swipeitem>
<div class="section">
<text class="sec_txt">禁止左右滚动</text>
</div>
<swipeitem disabled="{{disabled}}" left-options="{{leftBtns}}" right-options="{{rightBtns}}" @swipebtnclick="swipeItemClick">
<text>禁止左右滚动</text>
</swipeitem>
<div class="section">
<text class="sec_txt">div列表</text>
</div>
<div class="swipelist" id="swiplist">
<swipeitem identity="{{item.id}}" auto-close={{isautoclose}} right-options="{{item.options}}" for="(index,item) in swipeList" @swipestatechange="listSwipeItemChange(index)"
@swipebtnclick="listSwipeItemClick(index)" @centerclick="listCenterItemClick(index)">
<text onclick="clickText">{{item.content}}</text>
</swipeitem>
</div>
</div>
</template>
<style>
.container {
flex-direction: column;
width: 100%;
}
.section {
background-color: #f5f5f5;
height: 100px;
width: 100%;
border: 1px solid #f5f5f5;
}
.swipelist {
flex-direction: column;
}
.istItemStyle {
width: 1300px;
}
.liststyle {
flex-direction: column;
}
.sec_txt {
font-size: 32px;
font-weight: 600;
margin-left: 25px;
margin-top: 10px;
}
</style>
<script>
import prompt from '@system.prompt';
module.exports = {
data: {
isautoclose:true,
leftBtns: [],
disabled: true,
rightBtns: [],
unstyleleftBtns: [],
unstylerightBtns: [],
swipeList: []
},
onInit: function () {
let btn1 = { "txt": "置顶", "style": { "backgroundColor": "#00bfff", "txtColor": "#dcdcdc", "fontsize": 30, "btnwidth": 150 } };
let btn2 = { "txt": "ok", "style": { "backgroundColor": "#00bfff", "txtColor": "#dcdcdc", "fontsize": 30, "btnwidth": 200 } };
let btn3 = { "txt": "取消置顶", "style": { "backgroundColor": "#f01f1f", "txtColor": "#dcdcdc", "fontsize": 30, "btnwidth": 150 } };
let btn4 = { "txt": "cancel", "style": { "backgroundColor": "#00bfff", "txtColor": "#dcdcdc", "fontsize": 30, "btnwidth": 180 } };
let unstylebtn1 = { "txt": "置顶", "style": { "btnwidth": 230 } };
let unstylebtn2 = { "txt": "ok", "style": { "btnwidth": 200 } };
let unstylebtn3 = { "txt": "取消置顶", "style": { "btnwidth": 150 } };
let unstylebtn4 = { "txt": "cancel", "style": { "txtColor": "#ff9900", "fontsize": 30, "btnwidth": 150 } };
this.leftBtns.push(btn1);
this.leftBtns.push(btn2);
this.rightBtns.push(btn3);
this.rightBtns.push(btn4);
this.unstyleleftBtns.push(unstylebtn1);
this.unstyleleftBtns.push(unstylebtn2);
this.unstylerightBtns.push(unstylebtn3);
this.unstylerightBtns.push(unstylebtn4);
},
onReady(options) {
this.swipeList = [{
options: [{
txt: '添加',
style: {
backgroundColor: 'rgb(255,58,49)',
txtColor: "#dcdcdc",
fontsize: 36,
btnwidth: 150
}
}],
id: '10',
content: 'item1'
},
{
id: '11',
options: [{
txt: '添加',
style: {
backgroundColor: 'rgb(255,58,49)',
txtColor: "#dcdcdc",
fontsize: 30,
btnwidth: 150
}
},
{
txt: '删除',
style: {
backgroundColor: 'rgb(255,58,49)',
txtColor: "#dcdcdc",
fontsize: 30,
btnwidth: 150
}
}
],
content: 'item2'
},
{
id: '12',
options: [{
txt: '置顶',
style: {
backgroundColor: 'rgb(255,58,49)',
txtColor: "#dcdcdc",
fontsize: 30,
btnwidth: 150
}
},
{
txt: '标记为已读',
style: {
backgroundColor: 'rgb(255,58,49)',
txtColor: "#dcdcdc",
fontsize: 30,
btnwidth: 150
}
},
{
txt: '删除',
style: {
backgroundColor: 'rgb(255,58,49)',
txtColor: "#dcdcdc",
fontsize: 30,
btnwidth: 150
}
}
],
content: 'item3'
}
]
},
listSwipeItemClick: function (index, e) {
console.info("main swipeItemClick e:" + JSON.stringify(e) + ",index=" + index);
let position = e.detail.params.position;
// // let index = e.detail.params.clickIndex;
// let itemListId = e.detail.params.itemListIndex;
let btnValue = e.detail.params.btnValue;
let msg = '';
if (position == 'left') {
// msg='点击了左侧 ${e.detail.params.btnValue}按钮 ' ;
msg = '点击了左侧' + btnValue + '按钮 ';
} else {
msg = '点击了右侧' + btnValue + '按钮 ';
}
prompt.showToast({
message: msg,
duration: 2000,
gravity: 'center'
})
if (btnValue == "添加") {
console.info("begin to add ")
this.addSwipteItem();
} else if (btnValue == "删除") {
this.delSwipteItem(index);
}
},
addSwipteItem: function () {
this.swipeList.push({
id: new Date().getTime(),
content: '新增' + new Date().getTime(),
options: [{
txt: '置顶',
style: {
fontsize: 30,
btnwidth: 150
}
},
{
txt: '标记为已读',
style: {
backgroundColor: 'rgb(254,156,1)',
fontsize: 30,
btnwidth: 150
}
},
{
txt: '删除',
style: {
backgroundColor: 'rgb(255,58,49)',
fontsize: 30,
btnwidth: 150
}
}
],
});
},
delSwipteItem: function (index) {
var that = this;
prompt.showDialog({
title: '提示',
message: '是否删除',
buttons: [
{
text: '确定',
color: '#33dd44'
}, {
text: '取消',
color: '#33dd44'
}],
success: function (data) {
console.log("delSwipteItem showDialog handling callback data：" + JSON.stringify(data));
if (data.index == 0) {
//delete
that.swipeList.splice(index, 1);
}
},
fail: function (data, code) {
console.log("handling fail, code = " + code);
}
})
},
swipeItemClick: function (e) {
console.info("main swipeItemClick e:" + JSON.stringify(e));
let position = e.detail.params.position;
let btnValue = e.detail.params.btnValue;
let msg = '';
if (position == 'left') {
// msg='点击了左侧 ${e.detail.params.btnValue}按钮 ' ;
msg = '点击了左侧' + btnValue + '按钮 ';
} else {
msg = '点击了右侧' + btnValue + '按钮 ';
}
prompt.showToast({
message: msg,
duration: 2000,
gravity: 'center'
})
},
clickText: function () {
console.info("click text");
prompt.showToast({
message: 'click text',
duration: 2000,
gravity: 'center'
})
},
listCenterItemClick: function (index, e) {
console.info("main listCenterItemClick e:" + JSON.stringify(e) + ",index=" + index);
prompt.showToast({
message: 'click text',
duration: 2000,
gravity: 'center'
})
},
listSwipeItemChange: function (index, e) {
console.info("main listSwipeItemChange e:" + JSON.stringify(e) + ",index=" + index);
this.$broadcast('closeSwipeItem', { 'exclude': this.swipeList[index].id });
},
swipeItemChange: function(id,e) {
console.info("main swipeItemChange e:" + JSON.stringify(e)+",id="+id);
this.$broadcast('closeSwipeItem', { 'exclude': id });
},
}
</script>欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
