切换风格

加州 简约米色 星空 绿野仙踪 花卉 城市 简约黑色 白云 薰衣草 晚霞 粉色心情 伦敦 雪山 龙珠

回复 0

2

主题

2

帖子

10

积分

新手上路

Rank: 1

积分
10
小程序touch事件与swiper冲突[复制链接]
发表于 2018-6-15 17:51:02 | 显示全部楼层 |阅读模式
{{txt}}                                                               11111111                                                                                22222222                                                                                 333333                                          
[color=]import
vueRefresh
[color=]from

[color=]'../../components/vueRefresh'
[color=]export

[color=]default
{
[color=]data
() {  
[color=]return
{  scrollTop:
[color=]0
,  thisHeight:
[color=]0
,  acindex:
[color=]0
,  touchYDelta:
[color=]''
,  touchXDelta:
[color=]''
,  isLoading:
[color=]false
,  translateVal:
[color=]''
,  isMoved:
[color=]false
,  firstTouchY:
[color=]''
,  firstTouchX:
[color=]''
,  initialScroll:
[color=]''
,  triggerDistance:
[color=]100
,  animationData: {},  txt:
[color=]'下拉刷新'
  }},
[color=]onLoad
() {
[color=]this
.thisHeight
[color=]=
wx.
[color=]getSystemInfoSync
().windowHeight
[color=]-

[color=]43
},methods:{  
[color=]touchstart
(ev) {  
[color=]if
(
[color=]this
.isLoading) {  
[color=]return
  }  console.
[color=]log
(
[color=]"开始"
)  
[color=]this
.isMoved
[color=]=

[color=]false
  
[color=]this
.sDuration
[color=]=

[color=]'0ms'
  
[color=]this
.touchYDelta
[color=]=

[color=]''
  
[color=]this
.touchXDelta
[color=]=
[color=]''
;  const touchobj
[color=]=
ev.touches[
[color=]0
]  
[color=]this
.firstTouchY
[color=]=

[color=]parseInt
(touchobj.clientY)  
[color=]this
.firstTouchX
[color=]=

[color=]parseInt
(touchobj.clientX)  
[color=]this
.initialScroll
[color=]=

[color=]this
.scrollTop  },  
[color=]touchmove
(ev,e) {  
[color=]if
(
[color=]this
.isLoading) {  
[color=]return
  }  console.
[color=]log
(
[color=]"移动"
)  let self
[color=]=

[color=]this
  let
[color=]moving

[color=]=
function () {  let touchobj
[color=]=
ev.touches[
[color=]0
]  let touchY
[color=]=

[color=]parseInt
(touchobj.clientY)  let touchX
[color=]=

[color=]parseInt
(touchobj.clientX)  let touchYDelta
[color=]=
touchY
[color=]-
self.firstTouchY  self.touchYDelta
[color=]=
touchYDelta   let touchXDelta
[color=]=
touchX
[color=]-
self.firstTouchX  self.touchXDelta
[color=]=
touchXDelta  
[color=]if
(    self.initialScroll
[color=]>

[color=]0

[color=]||
    self.scrollTop
[color=]>

[color=]0

[color=]||
touchXDelta
[color=]10

[color=]||
touchXDelta
[color=]>
[color=]10
   
[color=]||
(self.scrollTop
[color=]===

[color=]0

[color=]&&
touchYDelta  
[color=]0
)  ) {    self.firstTouchY
[color=]=
touchY   self.firstTouchX
[color=]=
touchX   
[color=]return
  }  let translateVal
[color=]=

[color=]Math
.
[color=]pow
(touchYDelta,
[color=]0.85
)  let animation
[color=]=
wx.
[color=]createAnimation
({    duration:
[color=]0
,    timingFunction:
[color=]'linear'
  })  animation.
[color=]translate3d
(
[color=]0
, translateVal,
[color=]0
).
[color=]step
()  self.animationData
[color=]=
animation.
[color=]export
()  self.isMoved
[color=]=

[color=]true
  
[color=]if
(touchYDelta
[color=]>
self.triggerDistance) {    self.txt
[color=]=

[color=]'松开释放刷新'
  }
[color=]else
{    self.txt
[color=]=

[color=]'下拉刷新'
  }  }  
[color=]this
.
[color=]throttle
(
[color=]moving
(),
[color=]10
)  },  
[color=]touchend
(ev) {  let self
[color=]=

[color=]this
  console.
[color=]log
(
[color=]"结束"
)  
[color=]// 根据下拉高度判断是否加载
  
[color=]if
(
[color=]this
.touchYDelta
[color=]>=

[color=]this
.triggerDistance) {  
[color=]this
.isLoading
[color=]=

[color=]true
  let animation
[color=]=
wx.
[color=]createAnimation
({    duration:
[color=]300
,    timingFunction:
[color=]'linear'
  })  animation.
[color=]translate3d
(
[color=]0
,
[color=]30
,
[color=]0
).
[color=]step
()  animation.
[color=]translate3d
(
[color=]0
,
[color=]0
,
[color=]0
).
[color=]step
({delay:
[color=]1000
})  self.animationData
[color=]=
animation.
[color=]export
()  self.className
[color=]=

[color=]'refreshing'
  self.txt
[color=]=

[color=]'正在刷新...'
  
[color=]this
.
[color=]$emit
(
[color=]'refresh'
)  }
[color=]else
{  let animation
[color=]=
wx.
[color=]createAnimation
({    duration:
[color=]300
,    timingFunction:
[color=]'linear'
  })  animation.
[color=]translate3d
(
[color=]0
,
[color=]0
,
[color=]0
).
[color=]step
()  self.animationData
[color=]=
animation.
[color=]export
()  }  
[color=]this
.isMoved
[color=]=

[color=]false
  
[color=]this
.isLoading
[color=]=

[color=]false
;  },  
[color=]throttle
(fn, delay) {  let allowSample
[color=]=

[color=]true
  
[color=]return
function (e) {  
[color=]if
(allowSample) {    allowSample
[color=]=

[color=]false
   
[color=]setTimeout
(function () {    allowSample
[color=]=

[color=]true
    }, delay)   
[color=]fn
(e)  }  }  }},components: {  vueRefresh},}
[color=].refresh-content
{height:
[color=]100
[color=]%
;width:
[color=]100
[color=]%
;position:
[color=]relative
;-webkit-overflow-scrolling:
[color=]touch
;-webkit-transform:
[color=]translate3d
(
[color=]0
,
[color=]0
,
[color=]0
);transform:
[color=]translate3d
(
[color=]0
,
[color=]0
,
[color=]0
);}
[color=].refresh-pull-arrow
{text-align:
[color=]center
;font-size:
[color=]15
[color=]px
;color:
[color=]#999
;height:
[color=]30
[color=]px
;width:
[color=]100
[color=]%
;}
[color=].refresh-load
{  width:
[color=]100
[color=]%
;  height:
[color=]100
[color=]px
;  position:
[color=]absolute
;  top:
[color=]-30
[color=]px
;  left:
[color=]0
;
[color=]/* padding: 8px 0; */
}
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|葫芦娃微信小程序资源网 ( ICP证:鲁ICP备14008133号-3 

GMT+8, 2018-11-15 12:24 , Processed in 0.024207 second(s), 27 queries .

Powered by Discuz!ģ X3.2

© 2001-2013

返回顶部