Skip to content

U
uni-app

r15132706585 / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 0
Fork 0
U
uni-app

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 5b79464c 编写于 作者: D DCloud_LXH
浏览文件
操作

fix: fix scroll-view touchmove does not triggered when refreshing fixed #2756

上级 42bb553a
隐藏空白更改
内联 并排
Showing with 150 addition and 47 deletion
src/core/view/components/scroll-view/index.vue
浏览文件 @ 5b79464c
......@@ -6,7 +6,10 @@
>
<div
ref="main"
:style="{'overflow-x': scrollX?'auto':'hidden','overflow-y': scrollY?'auto':'hidden'}"
:style="{
'overflow-x': scrollX ? 'auto' : 'hidden',
'overflow-y': scrollY ? 'auto' : 'hidden',
}"
class="uni-scroll-view"
>
<div
......@@ -16,7 +19,10 @@
<div
v-if="refresherEnabled"
ref="refresherinner"
:style="{'background-color': refresherBackground, 'height': refresherHeight + 'px'}"
:style="{
'background-color': refresherBackground,
height: refresherHeight + 'px',
}"
class="uni-scroll-view-refresher"
>
<div
......@@ -25,23 +31,25 @@
>
<div class="uni-scroll-view-refresh-inner">
<svg
v-if="refreshState=='pulling'"
v-if="refreshState == 'pulling'"
key="refresh__icon"
:style="{'transform': 'rotate('+ refreshRotate +'deg)'}"
:style="{ transform: 'rotate(' + refreshRotate + 'deg)' }"
fill="#2BD009"
class="uni-scroll-view-refresh__icon"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
<path
d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
/>
<path
d="M0 0h24v24H0z"
fill="none"
/>
</svg>
<svg
v-if="refreshState=='refreshing'"
v-if="refreshState == 'refreshing'"
key="refresh__spinner"
class="uni-scroll-view-refresh__spinner"
width="24"
......@@ -53,14 +61,14 @@
cy="50"
r="20"
fill="none"
style="color: #2BD009;"
style="color: #2bd009"
stroke-width="3"
/>
</svg>
</div>
</div>
<slot
v-if="refresherDefaultStyle=='none'"
v-if="refresherDefaultStyle == 'none'"
name="refresher"
/>
</div>
......@@ -72,17 +80,17 @@
</template>
<script>
import scroller from 'uni-mixins/scroller/index'
import {
supportsPassive
} from 'uni-shared'
import { supportsPassive } from 'uni-shared'
import {
initScrollBounce,
disableScrollBounce
} from 'uni-platform/helpers/scroll'
const passiveOptions = supportsPassive ? {
passive: true
} : false
const passiveOptions = supportsPassive
? {
passive: true
}
: false
// const PULLING = 'pulling'
// const REFRESHING = 'refreshing'
......@@ -224,7 +232,10 @@ export default {
if (main.scrollLeft === 0 && x > touchStart.x) {
needStop = false
return
} else if (main.scrollWidth === main.offsetWidth + main.scrollLeft && x < touchStart.x) {
} else if (
main.scrollWidth === main.offsetWidth + main.scrollLeft &&
x < touchStart.x
) {
needStop = false
return
}
......@@ -235,15 +246,21 @@ export default {
} else {
// 纵向滑动
if (self.scrollY) {
if (self.refresherEnabled && main.scrollTop === 0 && y > touchStart.y) {
needStop = true
if (main.scrollTop === 0 && y > touchStart.y) {
needStop = false
// 刷新时，阻止页面滚动
if (event.cancelable !== false) event.preventDefault()
} else if (main.scrollHeight === main.offsetHeight + main.scrollTop && y < touchStart.y) {
if (self.refresherEnabled && event.cancelable !== false) {
event.preventDefault()
}
} else if (
main.scrollHeight === main.offsetHeight + main.scrollTop &&
y < touchStart.y
) {
needStop = false
return
} else {
needStop = true
}
needStop = true
} else {
needStop = false
}
......@@ -305,12 +322,26 @@ export default {
self._setRefreshState('refresherabort')
}
}
this.$refs.main.addEventListener('touchstart', this.__handleTouchStart, passiveOptions)
this.$refs.main.addEventListener(
'touchstart',
this.__handleTouchStart,
passiveOptions
)
this.$refs.main.addEventListener('touchmove', this.__handleTouchMove)
this.$refs.main.addEventListener('scroll', this.__handleScroll, supportsPassive ? {
passive: false
} : false)
this.$refs.main.addEventListener('touchend', this.__handleTouchEnd, passiveOptions)
this.$refs.main.addEventListener(
'scroll',
this.__handleScroll,
supportsPassive
? {
passive: false
}
: false
)
this.$refs.main.addEventListener(
'touchend',
this.__handleTouchEnd,
passiveOptions
)
initScrollBounce()
},
activated () {
......@@ -319,34 +350,70 @@ export default {
this.scrollX && (this.$refs.main.scrollLeft = this.lastScrollLeft)
},
beforeDestroy () {
this.$refs.main.removeEventListener('touchstart', this.__handleTouchStart, passiveOptions)
this.$refs.main.removeEventListener('touchmove', this.__handleTouchMove, passiveOptions)
this.$refs.main.removeEventListener('scroll', this.__handleScroll, supportsPassive ? {
passive: false
} : false)
this.$refs.main.removeEventListener('touchend', this.__handleTouchEnd, passiveOptions)
this.$refs.main.removeEventListener(
'touchstart',
this.__handleTouchStart,
passiveOptions
)
this.$refs.main.removeEventListener(
'touchmove',
this.__handleTouchMove,
passiveOptions
)
this.$refs.main.removeEventListener(
'scroll',
this.__handleScroll,
supportsPassive
? {
passive: false
}
: false
)
this.$refs.main.removeEventListener(
'touchend',
this.__handleTouchEnd,
passiveOptions
)
},
methods: {
scrollTo: function (t, n) {
var i = this.$refs.main
t < 0 ? t = 0 : n === 'x' && t > i.scrollWidth - i.offsetWidth ? t = i.scrollWidth - i.offsetWidth
: n === 'y' && t > i.scrollHeight - i.offsetHeight && (t = i.scrollHeight - i.offsetHeight)
t < 0
? (t = 0)
: n === 'x' && t > i.scrollWidth - i.offsetWidth
? (t = i.scrollWidth - i.offsetWidth)
: n === 'y' &&
t > i.scrollHeight - i.offsetHeight &&
(t = i.scrollHeight - i.offsetHeight)
var r = 0
var o = ''
n === 'x' ? r = i.scrollLeft - t : n === 'y' && (r = i.scrollTop - t)
n === 'x' ? (r = i.scrollLeft - t) : n === 'y' && (r = i.scrollTop - t)
if (r !== 0) {
this.$refs.content.style.transition = 'transform .3s ease-out'
this.$refs.content.style.webkitTransition = '-webkit-transform .3s ease-out'
this.$refs.content.style.webkitTransition =
'-webkit-transform .3s ease-out'
if (n === 'x') {
o = 'translateX(' + r + 'px) translateZ(0)'
} else {
n === 'y' && (o = 'translateY(' + r + 'px) translateZ(0)')
}
this.$refs.content.removeEventListener('transitionend', this.__transitionEnd)
this.$refs.content.removeEventListener('webkitTransitionEnd', this.__transitionEnd)
this.$refs.content.removeEventListener(
'transitionend',
this.__transitionEnd
)
this.$refs.content.removeEventListener(
'webkitTransitionEnd',
this.__transitionEnd
)
this.__transitionEnd = this._transitionEnd.bind(this, t, n)
this.$refs.content.addEventListener('transitionend', this.__transitionEnd)
this.$refs.content.addEventListener('webkitTransitionEnd', this.__transitionEnd)
this.$refs.content.addEventListener(
'transitionend',
this.__transitionEnd
)
this.$refs.content.addEventListener(
'webkitTransitionEnd',
this.__transitionEnd
)
if (n === 'x') {
// if (e !== 'ios') {
i.style.overflowX = 'hidden'
......@@ -370,14 +437,22 @@ export default {
this._noBubble = false
}
if (this._noBubble === null && this.scrollY) {
if (Math.abs(this._y - $event.detail.y) / Math.abs(this._x - $event.detail.x) > 1) {
if (
Math.abs(this._y - $event.detail.y) /
Math.abs(this._x - $event.detail.x) >
1
) {
this._noBubble = true
} else {
this._noBubble = false
}
}
if (this._noBubble === null && this.scrollX) {
if (Math.abs(this._x - $event.detail.x) / Math.abs(this._y - $event.detail.y) > 1) {
if (
Math.abs(this._x - $event.detail.x) /
Math.abs(this._y - $event.detail.y) >
1
) {
this._noBubble = true
} else {
this._noBubble = false
......@@ -402,13 +477,24 @@ export default {
deltaY: this.lastScrollTop - target.scrollTop
})
if (this.scrollY) {
if (target.scrollTop <= this.upperThresholdNumber && this.lastScrollTop - target.scrollTop > 0 && $event.timeStamp - this.lastScrollToUpperTime > 200) {
if (
target.scrollTop <= this.upperThresholdNumber &&
this.lastScrollTop - target.scrollTop > 0 &&
$event.timeStamp - this.lastScrollToUpperTime > 200
) {
this.$trigger('scrolltoupper', $event, {
direction: 'top'
})
this.lastScrollToUpperTime = $event.timeStamp
}
if (target.scrollTop + target.offsetHeight + this.lowerThresholdNumber >= target.scrollHeight && this.lastScrollTop - target.scrollTop < 0 && $event.timeStamp - this.lastScrollToLowerTime > 200) {
if (
target.scrollTop +
target.offsetHeight +
this.lowerThresholdNumber >=
target.scrollHeight &&
this.lastScrollTop - target.scrollTop < 0 &&
$event.timeStamp - this.lastScrollToLowerTime > 200
) {
this.$trigger('scrolltolower', $event, {
direction: 'bottom'
})
......@@ -416,13 +502,24 @@ export default {
}
}
if (this.scrollX) {
if (target.scrollLeft <= this.upperThresholdNumber && this.lastScrollLeft - target.scrollLeft > 0 && $event.timeStamp - this.lastScrollToUpperTime > 200) {
if (
target.scrollLeft <= this.upperThresholdNumber &&
this.lastScrollLeft - target.scrollLeft > 0 &&
$event.timeStamp - this.lastScrollToUpperTime > 200
) {
this.$trigger('scrolltoupper', $event, {
direction: 'left'
})
this.lastScrollToUpperTime = $event.timeStamp
}
if (target.scrollLeft + target.offsetWidth + this.lowerThresholdNumber >= target.scrollWidth && this.lastScrollLeft - target.scrollLeft < 0 && $event.timeStamp - this.lastScrollToLowerTime > 200) {
if (
target.scrollLeft +
target.offsetWidth +
this.lowerThresholdNumber >=
target.scrollWidth &&
this.lastScrollLeft - target.scrollLeft < 0 &&
$event.timeStamp - this.lastScrollToLowerTime > 200
) {
this.$trigger('scrolltolower', $event, {
direction: 'right'
})
......@@ -505,8 +602,14 @@ export default {
main.style.overflowY = this.scrollY ? 'auto' : 'hidden'
main.scrollTop = val
}
this.$refs.content.removeEventListener('transitionend', this.__transitionEnd)
this.$refs.content.removeEventListener('webkitTransitionEnd', this.__transitionEnd)
this.$refs.content.removeEventListener(
'transitionend',
this.__transitionEnd
)
this.$refs.content.removeEventListener(
'webkitTransitionEnd',
this.__transitionEnd
)
},
_setRefreshState (state) {
switch (state) {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或