123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161 |
- /*
- * 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();
- }
- });
|