89 lines
1.8 KiB
JavaScript
89 lines
1.8 KiB
JavaScript
// components/swipeButton/index.js
|
|
Component({
|
|
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
properties: {
|
|
loading:{
|
|
type:Boolean,
|
|
value:false
|
|
},
|
|
buttonText:{
|
|
type:String,
|
|
value:'我要接单'
|
|
},
|
|
buttonLoadingText:{
|
|
type:String,
|
|
value:'接单中'
|
|
}
|
|
},
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
moveEvent:null,
|
|
moveAreaWidth:0,
|
|
moveViewWidth:92,
|
|
|
|
|
|
textOpacity:1,
|
|
textRight:80,
|
|
moveViewX:0
|
|
},
|
|
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
buttonOnMove(event){
|
|
this.data.moveEvent = event;
|
|
if(!this.data.moveAreaWidth){
|
|
this.createSelectorQuery().select('#moveArea'+index).boundingClientRect((res)=>{
|
|
this.data.moveAreaWidth = res.width;
|
|
}).exec();
|
|
}
|
|
let x = this.data.moveEvent.detail.x;
|
|
let opacity = 1 - x/(this.data.moveAreaWidth - this.data.moveViewWidth);
|
|
let right = opacity*80;
|
|
this.setData({
|
|
textOpacity:opacity,
|
|
textRight:right
|
|
})
|
|
},
|
|
buttonMoveCancel(event){
|
|
const x = this.data.moveEvent.detail.x;
|
|
//给 10 像素边界
|
|
//moveAreaWidth - this.data.moveViewWidth - 10 <= x
|
|
let viewX = 0,loading = false;
|
|
if((this.data.moveAreaWidth - this.data.moveViewWidth)/3*2 < x){
|
|
viewX = this.data.moveAreaWidth - this.data.moveViewWidth;
|
|
loading = true;
|
|
}
|
|
this.setData({
|
|
moveViewX:viewX,
|
|
loading:loading
|
|
});
|
|
if(loading){
|
|
this.triggerEvent('done');
|
|
}
|
|
}
|
|
},
|
|
|
|
lifetimes:{
|
|
attached(){
|
|
this.createSelectorQuery().select('#moveArea').boundingClientRect((res)=>{
|
|
this.data.moveAreaWidth = res.width;
|
|
}).exec();
|
|
}
|
|
},
|
|
observers:{
|
|
"loading"(l){
|
|
if(!l){
|
|
this.setData({
|
|
moveViewX:0,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}) |