162 lines
5.1 KiB
Java
162 lines
5.1 KiB
Java
|
/*
|
|||
|
* touch事件判断方式
|
|||
|
* https://github.com/madrobby/zepto/blob/master/src/touch.js#files
|
|||
|
*/
|
|||
|
function swipeDirection(x1, x2, y1, y2) {
|
|||
|
return Math.abs(x1 - x2) >=
|
|||
|
Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
|
|||
|
}
|
|||
|
|
|||
|
Component({
|
|||
|
externalClasses: ['i-class'],
|
|||
|
properties: {
|
|||
|
actions: {
|
|||
|
value: [],
|
|||
|
type: Array,
|
|||
|
observer : '_updateButtonSize'
|
|||
|
},
|
|||
|
unclosable : {
|
|||
|
value : false,
|
|||
|
type : Boolean
|
|||
|
},
|
|||
|
toggle : {
|
|||
|
value : false,
|
|||
|
type : Boolean,
|
|||
|
observer : 'closeButtonGroup'
|
|||
|
},
|
|||
|
operateWidth : {
|
|||
|
type : Number,
|
|||
|
value : 160
|
|||
|
}
|
|||
|
},
|
|||
|
options: {
|
|||
|
// 在组件定义时的选项中启用多slot支持
|
|||
|
multipleSlots: true
|
|||
|
},
|
|||
|
data : {
|
|||
|
//touch start position
|
|||
|
tStart : {
|
|||
|
pageX : 0,
|
|||
|
pageY : 0
|
|||
|
},
|
|||
|
//限制滑动距离
|
|||
|
limitMove : 0,
|
|||
|
//element move position
|
|||
|
position : {
|
|||
|
pageX : 0,
|
|||
|
pageY : 0
|
|||
|
}
|
|||
|
},
|
|||
|
methods : {
|
|||
|
//阻止事件冒泡
|
|||
|
loop(){},
|
|||
|
_updateButtonSize(){
|
|||
|
const actions = this.data.actions;
|
|||
|
if( actions.length > 0 ){
|
|||
|
const query = wx.createSelectorQuery().in(this);
|
|||
|
let limitMovePosition = 0;
|
|||
|
actions.forEach(item => {
|
|||
|
limitMovePosition += item.width || 0;
|
|||
|
});
|
|||
|
this.data.limitMove = limitMovePosition;
|
|||
|
/*
|
|||
|
* 动态获取每个传进值的按钮尺寸不能正确获取,在安卓上少了6px
|
|||
|
* 暂时实现需要在actions里面传递宽度
|
|||
|
* 需要后期调研
|
|||
|
*/
|
|||
|
//query.selectAll('.i-swipeout-button-right-item').boundingClientRect((rects)=>{
|
|||
|
// if( rects ){
|
|||
|
// console.log(rects,1111111)
|
|||
|
// rects.forEach(item => {
|
|||
|
// limitMovePosition += item.width;
|
|||
|
// });
|
|||
|
// this.data.limitMove = limitMovePosition;
|
|||
|
// console.log(limitMovePosition,111111111)
|
|||
|
// }
|
|||
|
// }).exec()
|
|||
|
}else{
|
|||
|
this.data.limitMove = this.data.operateWidth;
|
|||
|
|
|||
|
}
|
|||
|
},
|
|||
|
handlerTouchstart(event){
|
|||
|
const touches = event.touches ? event.touches[0] : {};
|
|||
|
const tStart = this.data.tStart;
|
|||
|
if( touches ){
|
|||
|
for( let i in tStart ){
|
|||
|
if( touches[i] ){
|
|||
|
tStart[i] = touches[i];
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
},
|
|||
|
swipper(touches){
|
|||
|
const data = this.data;
|
|||
|
const start = data.tStart;
|
|||
|
const spacing = {
|
|||
|
pageX : touches.pageX - start.pageX,
|
|||
|
pageY : touches.pageY - start.pageY
|
|||
|
}
|
|||
|
if( data.limitMove < Math.abs( spacing.pageX ) ){
|
|||
|
spacing.pageX = -data.limitMove;
|
|||
|
|
|||
|
}
|
|||
|
this.setData({
|
|||
|
'position' : spacing
|
|||
|
})
|
|||
|
},
|
|||
|
handlerTouchmove(event){
|
|||
|
const start = this.data.tStart;
|
|||
|
const touches = event.touches ? event.touches[0] : {};
|
|||
|
if( touches ){
|
|||
|
const direction = swipeDirection( start.pageX,touches.pageX,start.pageY,touches.pageY );
|
|||
|
if( direction === 'Left' ){
|
|||
|
this.swipper( touches );
|
|||
|
}
|
|||
|
}
|
|||
|
},
|
|||
|
handlerTouchend(event){
|
|||
|
const start = this.data.tStart;
|
|||
|
const touches = event.changedTouches ? event.changedTouches[0] : {};
|
|||
|
if( touches ){
|
|||
|
const direction = swipeDirection( start.pageX,touches.pageX,start.pageY,touches.pageY );
|
|||
|
const spacing = {
|
|||
|
pageX : touches.pageX - start.pageX,
|
|||
|
pageY : touches.pageY - start.pageY
|
|||
|
}
|
|||
|
if( Math.abs( spacing.pageX ) >= 40 && direction === "Left" ){
|
|||
|
spacing.pageX = spacing.pageX < 0 ? - this.data.limitMove : this.data.limitMove;
|
|||
|
}else{
|
|||
|
spacing.pageX = 0;
|
|||
|
}
|
|||
|
this.setData({
|
|||
|
'position' : spacing
|
|||
|
})
|
|||
|
}
|
|||
|
},
|
|||
|
handlerButton(event){
|
|||
|
if( !this.data.unclosable ){
|
|||
|
this.closeButtonGroup();
|
|||
|
}
|
|||
|
const dataset = event.currentTarget.dataset;
|
|||
|
this.triggerEvent('change',{
|
|||
|
index : dataset.index
|
|||
|
})
|
|||
|
},
|
|||
|
closeButtonGroup(){
|
|||
|
this.setData({
|
|||
|
'position' : {pageX : 0,pageY : 0}
|
|||
|
})
|
|||
|
},
|
|||
|
//控制自定义组件
|
|||
|
handlerParentButton(event){
|
|||
|
if( !this.data.unclosable ){
|
|||
|
this.closeButtonGroup();
|
|||
|
}
|
|||
|
}
|
|||
|
},
|
|||
|
ready(){
|
|||
|
this._updateButtonSize();
|
|||
|
}
|
|||
|
});
|