162 lines
5.1 KiB
JavaScript
162 lines
5.1 KiB
JavaScript
/*
|
||
* 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();
|
||
}
|
||
});
|