参考BUI-Weex实现的侧滑删除的weex组件。
上图：
组件实现：
<!--列表侧滑操作组件-->
<template>
<div class="cell" :style="cell_style" ref="cell" @swipe="handleSwipe">
<slot name="cell_content" >
</slot>
<div class="rightItems" @click="itemClick(item)" v-for="item in rightItems"
:style="{height:rightItems_height,backgroundColor:item.backgroundColor,width:item.width}">
<text :style="item.textStyle">{{item.text}}</text>
</div>
</div>
</template>
<script>
var animation=weex.requireModule('animation');
var modal=weex.requireModule('modal');
const domModule = weex.requireModule('dom')
export default {
name: "swip-cell",
props:{
//操作项配置
rightItems:{
default:[
{
backgroundColor:"#FF0000",
textStyle:{
color:"#ffffff",
fontSize:30
},
width:100,
text:"删除",
icon:"root:img/logo.png"
}
],
type:Array
},
//整体宽度
width:{
default:750,
type:Number,
},
},
data(){
return{
cell_style:{
width:750
},
rightItems_height:0
}
},
created(){
let self=this;
this.cell_style={width:this.width+this.getRightWidth()};
},
mounted(){
},
methods:{
handleSwipe(e){
let self=this;
let cell=this.$refs.cell.ref;
if(e.direction=='left'){
//动态获取右侧操作项的高度
this.rightItems_height=domModule
.getComponentRect(this.$refs.cell, function (res) {
self.rightItems_height=res.size.height;
});
this.move(cell,-this.getRightWidth());
}else {
this.move(cell,0);
}
},
move(ref,position){
animation.transition(ref,{
styles: {
transform:`translateX(${position})`,
},
duration: 300, //ms
timingFunction: 'ease-out',
needLayout:false,
delay: 0 //ms
},function (res) {
})
},
getRightWidth(){
let right_w=0;
this.rightItems.forEach(item=>{
right_w+=item.width;
});
return right_w;
},
itemClick(item){
let cell=this.$refs.cell.ref;
this.move(cell,0);
this.$emit("swipe_item_click",item);
}
}
}
</script>
<style scoped>
.rightItems{
align-items: center;
justify-content: center;
}
.cell{
flex-direction: row;
}
</style>
组件使用：
<template>
<div>
<head title="swip-cell-dem"></head>
<list style="padding-left: 20px">
<cell class="cell" v-for="item in list">
<div class="devideLine"></div>
<swip-cell width="710" @swipe_item_click="itemClick" :rightItems="rightItems">
<div slot="cell_content" class="cell_content">
<text style="font-size: 34px;">{{item}}</text>
</div>
</swip-cell>
<div class="devideLine"></div>
</cell>
</list>
</div>
</template>
<!--需要设置swip-cell的父容器的宽度与swip-cell的宽度一致，
并且对于整体的样式，如圆角等，需要给到组件的父组件-->
<script>
import Head from "../components/head.vue";
import SwipCell from "../components/swipCell.vue";
var modal=weex.requireModule("modal");
export default {
components: {
SwipCell,
Head},
data(){
return{
list:["aaaaaa","vvvvvvv","bbbbbbb"],
rightItems:[
{
backgroundColor:"#FF0000",
textStyle:{
color:"#ffffff",
fontSize:30
},
width:150,
text:"删除",
icon:"root:img/logo.png"
},
{
backgroundColor:"#ff11dd",
textStyle:{
color:"#ffffff",
fontSize:30
},
width:100,
text:"收藏",
icon:"root:img/logo.png"
},
{
backgroundColor:"#268cf0",
textStyle:{
color:"#fffff",
fontSize:30
},
width:100,
text:"详情",
icon:"root:img/logo.png"
}
]
}
},
methods:{
itemClick(event){
modal.toast({message:event.text})
}
}
}
</script>
<style scoped>
.cell_content{
width: 710px;
background-color: gold;
padding: 50px;
align-items: center;
justify-content: center;
}
.devideLine{
height: 20px;
width: 600px;
}
.cell{
width: 710px;
border-radius: 100px;
}
</style>
还有需要改进的地方，后续会进行修改和优化。
示例代码均在我的开源项目中，可以随时查看https://github.com/liuxinyea/IWeex。
