实例|APICloud AVM框架封装滑动单元格组件

滑动单元格组件原理是主题部分把按钮进行遮挡，按钮通过绝对定位，定位在最右边，通过监听触摸事件（touch），判断滑动的方向和计算滑动的距离以此来判定显示和隐藏按钮。显示和隐藏按钮是通过对主体部分进行css 的transform属性对主体元素进行移动，以达到显示和隐藏按钮的效果。今天介绍APICloud AVM框架封装滑动单元格组件的实例。

组件文件

easy-swipe-cell.stml

<template>

<view class="easy-swipe-cell_container" data-id={itemId} @touchstart="start" @touchmove="move" @touchend="end">

<view class="easy-swipe-cell_content" :style="itemId == touchIdNow?handleSwipe:'transform:translateX(0px)'">

<text>{itemContent}</text>

</view>

<view class="easy-swipe-cell_btn" id="btn">

<view class="easy-swipe-cell_btn-item" style="background-color: #ee0a24;" data-id={itemId} data-type='delete' @click="clickItem">

<text class="easy-swipe-cell_btn-item-label">删除</text>

</view>

<view class="easy-swipe-cell_btn-item" style="background-color: #07c160;" data-id={itemId} data-type='read' @click="clickItem">

<text class="easy-swipe-cell_btn-item-label">已读</text>

</view>

</view>

</view>

</template>

<script>

export default {

name: 'easy-swipe-cell',

props:{

itemId:String,

itemContent:String,

touchIdNow:String

},

data() {

return{

startX:0, //触摸位置

endX:0, //结束位置

moveX: 0, //滑动时的位置

disX: 0, //移动距离

handleSwipe: '',//滑动时的效果,动态绑定

touchId:''

}

},

mounted (){

 

},

methods: {

start(e){

// console.log(JSON.stringify(e.detail)+'开始');

this.data.startX = e.detail.x;

this.data.touchId = e.currentTarget.dataset.id;

this.fire('touch',this.data.touchId);

},

move(e){

// console.log(JSON.stringify(e.detail)+'移动');

let wd=document.getElementById('btn').offsetWidth;

this.data.moveX = e.detail.x;

this.data.disX = this.data.startX - this.data.moveX;

console.log(this.data.disX);

// 如果是向右滑动或者不滑动，不改变滑块的位置

if(this.disX < 0 || this.disX == 0) {

this.data.handleSwipe = "transform:translateX(0px)";

// 大于0，表示左滑了，此时滑块开始滑动

}else if (this.disX > 0) {

//具体滑动距离我取的是 手指偏移距离*5。

this.data.handleSwipe = "transform:translateX(-" + this.disX*5 + "px)";

// 最大也只能等于按钮宽度

if (this.disX*5 >=wd) {

this.handleSwipe = "transform:translateX(-" +wd+ "px)";

}

}

this.fire('touch',this.data.touchId);

},

end(e){

//console.log(JSON.stringify(e.detail)+'结束');

let wd=document.getElementById('btn').offsetWidth;

let endX = e.detail.x;

this.disX = this.data.startX - endX;

//如果距离小于按钮一半,强行回到起点

if ((this.disX*5) < (wd/2)) {

this.data.handleSwipe = "transform:translateX(0px)";

}else{

//大于一半 滑动到最大值

this.data.handleSwipe = "transform:translateX(-"+wd+ "px)";

}

this.fire('touch',this.data.touchId);

},

clickItem(e){

this.data.handleSwipe = "transform:translateX(0px)";

this.fire('clickBtn',{type:e.currentTarget.dataset.type,id:e.currentTarget.dataset.id});

}

        }

}

</script>

<style>

.easy-swipe-cell_content{

justify-content: center;

background-color: #ffffff;

position: relative;

width: 100%;

left: 0;

right: 0;

top: 0;

bottom: 0;

z-index: 1000;

transition: 0.6s;

min-height: 50px;

padding: 10px;

}

.easy-swipe-cell_btn{

position: absolute;

right: 0;

top: 0;

display: flex;

flex-flow: row nowrap;

height: 100%;

z-index: 1;

}

.easy-swipe-cell_btn-item{

height: 100%;

justify-content: center;

}

.easy-swipe-cell_btn-item-label{

color: #ffffff;

font-size: 15px;

padding: 0 20px;

}

</style>

示例文件

demo-easy-swipe-cell.stml

<template>

<scroll-view class="page">

<safe-area></safe-area>

<view v-for="(item,index) in list">

<easy-swipe-cell

:itemId="item.id"

:itemContent="item.content"

:touchIdNow="touchID"

ontouch="getTouchID"

onclickBtn="getClickTyeAndId"

>

</easy-swipe-cell>

</view>

</scroll-view>

</template>

<script>

import '../../components/easy-swipe-cell.stml'

export default {

name: 'demo-easy-swipe-cell',

apiready(){//like created

 

},

data() {

return{

list:[{

id:'1',

content:'关于开展什么活动的通知'

},{

id:'2',

content:'这是一条新的系统通知'

},{

id:'3',

content:'您有一条新的消息提醒，请及时查看'

}],

touchID:''

}

},

methods: {

getTouchID(e){

console.log(JSON.stringify(e));

this.data.touchID = e.detail;

},

getClickTyeAndId(e){

console.log(JSON.stringify(e));

api.toast({

msg:'当前点击的是'+e.detail.type+'按钮，记录ID是'+e.detail.id

})

}

}

}

</script>

<style>

.page {

height: 100%;

}

</style>