Skip to content

U
uni-app

小浣熊撸代码 / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 440a131c 编写于 作者: M mehaotian
浏览文件
操作

fix: 解决 scroll-view movable-area movable-view picker-view-column 垂直滑动与下拉刷新冲突的问题

上级 7f25b749
隐藏空白更改
内联 并排
Showing with 560 addition and 491 deletion
src/core/view/components/movable-area/index.vue
浏览文件 @ 440a131c
<script> <script>
function calc (e) { import {
return Math.sqrt(e.x * e.x + e.y * e.y) disableScrollBounce
} } from 'uni-shared'
export default { function calc (e) {
name: 'MovableArea', return Math.sqrt(e.x * e.x + e.y * e.y)
props: { }
scaleArea: {
type: Boolean, export default {
default: false name: 'MovableArea',
} props: {
}, scaleArea: {
data () { type: Boolean,
return { default: false
width: 0, }
height: 0, },
items: [] data () {
} return {
}, width: 0,
created: function () { height: 0,
this.gapV = { items: []
x: null, }
y: null },
} created: function () {
this.pinchStartLen = null this.gapV = {
}, x: null,
mounted: function () { y: null
this._resize() }
}, this.pinchStartLen = null
methods: { },
_resize () { mounted: function () {
this._getWH() this._resize()
this.items.forEach(function (item, index) { },
item.componentInstance.setParent() methods: {
}) _resize () {
}, this._getWH()
_find (target, items = this.items) { this.items.forEach(function (item, index) {
var root = this.$el item.componentInstance.setParent()
function get (node) { })
for (let i = 0; i < items.length; i++) { },
const item = items[i] _find (target, items = this.items) {
if (node === item.componentInstance.$el) { var root = this.$el
return item
} function get (node) {
} for (let i = 0; i < items.length; i++) {
if (node === root || node === document.body || node === document) { const item = items[i]
return null if (node === item.componentInstance.$el) {
} return item
return get(node.parentNode) }
} }
return get(target) if (node === root || node === document.body || node === document) {
}, return null
}
return get(node.parentNode)
}
return get(target)
},
_touchstart (t) { _touchstart (t) {
var i = t.touches disableScrollBounce({
if (i) { disable: true
if (i.length > 1) { })
var r = { var i = t.touches
x: i[1].pageX - i[0].pageX, if (i) {
y: i[1].pageY - i[0].pageY if (i.length > 1) {
} var r = {
this.pinchStartLen = calc(r) x: i[1].pageX - i[0].pageX,
this.gapV = r y: i[1].pageY - i[0].pageY
if (!this.scaleArea) { }
var touch0 = this._find(i[0].target) this.pinchStartLen = calc(r)
var touch1 = this._find(i[1].target) this.gapV = r
this._scaleMovableView = touch0 && touch0 === touch1 ? touch0 : null if (!this.scaleArea) {
} var touch0 = this._find(i[0].target)
} var touch1 = this._find(i[1].target)
} this._scaleMovableView = touch0 && touch0 === touch1 ? touch0 : null
}, }
_touchmove (t) { }
var n = t.touches }
if (n) { },
if (n.length > 1) { _touchmove (t) {
t.preventDefault() var n = t.touches
var i = { if (n) {
x: n[1].pageX - n[0].pageX, if (n.length > 1) {
y: n[1].pageY - n[0].pageY t.preventDefault()
} var i = {
if (this.gapV.x !== null && this.pinchStartLen > 0) { x: n[1].pageX - n[0].pageX,
var r = calc(i) / this.pinchStartLen y: n[1].pageY - n[0].pageY
this._updateScale(r) }
} if (this.gapV.x !== null && this.pinchStartLen > 0) {
this.gapV = i var r = calc(i) / this.pinchStartLen
} this._updateScale(r)
} }
}, this.gapV = i
}
}
},
_touchend (e) { _touchend (e) {
var t = e.touches disableScrollBounce({
if (!(t && t.length)) { disable: false
if (e.changedTouches) { })
this.gapV.x = 0 var t = e.touches
this.gapV.y = 0 if (!(t && t.length)) {
this.pinchStartLen = null if (e.changedTouches) {
if (this.scaleArea) { this.gapV.x = 0
this.items.forEach(function (item) { this.gapV.y = 0
item.componentInstance._endScale() this.pinchStartLen = null
}) if (this.scaleArea) {
} else { this.items.forEach(function (item) {
if (this._scaleMovableView) { item.componentInstance._endScale()
this._scaleMovableView.componentInstance._endScale() })
} } else {
} if (this._scaleMovableView) {
} this._scaleMovableView.componentInstance._endScale()
} }
}, }
_updateScale (e) { }
if (e && e !== 1) { }
if (this.scaleArea) { },
this.items.forEach(function (item) { _updateScale (e) {
item.componentInstance._setScale(e) if (e && e !== 1) {
}) if (this.scaleArea) {
} else { this.items.forEach(function (item) {
if (this._scaleMovableView) { item.componentInstance._setScale(e)
this._scaleMovableView.componentInstance._setScale(e) })
} } else {
} if (this._scaleMovableView) {
} this._scaleMovableView.componentInstance._setScale(e)
}, }
_getWH () { }
var style = window.getComputedStyle(this.$el) }
var rect = this.$el.getBoundingClientRect() },
this.width = rect.width - ['Left', 'Right'].reduce(function (all, item) { _getWH () {
return all + parseFloat(style['border' + item + 'Width']) + parseFloat(style['padding' + item]) var style = window.getComputedStyle(this.$el)
}, 0) var rect = this.$el.getBoundingClientRect()
this.height = rect.height - ['Top', 'Bottom'].reduce(function (all, item) { this.width = rect.width - ['Left', 'Right'].reduce(function (all, item) {
return all + parseFloat(style['border' + item + 'Width']) + parseFloat(style['padding' + item]) return all + parseFloat(style['border' + item + 'Width']) + parseFloat(style['padding' + item])
}, 0) }, 0)
} this.height = rect.height - ['Top', 'Bottom'].reduce(function (all, item) {
}, return all + parseFloat(style['border' + item + 'Width']) + parseFloat(style['padding' + item])
render (createElement) { }, 0)
var items = [] }
if (this.$slots.default) { },
this.$slots.default.forEach(vnode => { render (createElement) {
if (vnode.componentOptions && vnode.componentOptions.tag === 'v-uni-movable-view') { var items = []
items.push(vnode) if (this.$slots.default) {
} this.$slots.default.forEach(vnode => {
}) if (vnode.componentOptions && vnode.componentOptions.tag === 'v-uni-movable-view') {
} items.push(vnode)
this.items = items }
var $listeners = Object.assign({}, this.$listeners) })
var events = ['touchstart', 'touchmove', 'touchend'] }
events.forEach(event => { this.items = items
var existing = $listeners[event] var $listeners = Object.assign({}, this.$listeners)
var ours = this[`_${event}`] var events = ['touchstart', 'touchmove', 'touchend']
$listeners[event] = existing ? [].concat(existing, ours) : ours events.forEach(event => {
}) var existing = $listeners[event]
return createElement('uni-movable-area', { var ours = this[`_${event}`]
on: $listeners $listeners[event] = existing ? [].concat(existing, ours) : ours
}, [createElement('v-uni-resize-sensor', { })
on: { return createElement('uni-movable-area', {
resize: this._resize on: $listeners
} }, [createElement('v-uni-resize-sensor', {
}), ...items]) on: {
} resize: this._resize
} }
</script> }), ...items])
<style> }
uni-movable-area { }
display: block; </script>
position: relative; <style>
width: 10px; uni-movable-area {
height: 10px; display: block;
} position: relative;
width: 10px;
uni-movable-area[hidden] { height: 10px;
display: none; }
}
uni-movable-area[hidden] {
display: none;
}
</style> </style>
src/core/view/components/movable-view/index.vue
浏览文件 @ 440a131c
...@@ -11,7 +11,9 @@ import { ...@@ -11,7 +11,9 @@ import {
Friction, Friction,
STD STD
} from './utils' } from './utils'
import {
disableScrollBounce
} from 'uni-shared'
var requesting = false var requesting = false
function _requestAnimationFrame (e) { function _requestAnimationFrame (e) {
...@@ -278,6 +280,9 @@ export default { ...@@ -278,6 +280,9 @@ export default {
__handleTouchStart: function () { __handleTouchStart: function () {
if (!this._isScaling) { if (!this._isScaling) {
if (!this.disabled) { if (!this.disabled) {
disableScrollBounce({
disable: true
})
if (this._FA) { if (this._FA) {
this._FA.cancel() this._FA.cancel()
} }
...@@ -383,6 +388,9 @@ export default { ...@@ -383,6 +388,9 @@ export default {
__handleTouchEnd: function () { __handleTouchEnd: function () {
var self = this var self = this
if (!this._isScaling && !this.disabled && this._isTouching) { if (!this._isScaling && !this.disabled && this._isTouching) {
disableScrollBounce({
disable: true
})
this.$el.style.willChange = 'auto' this.$el.style.willChange = 'auto'
this._isTouching = false this._isTouching = false
if (!this._checkCanMove && !this._revise('out-of-bounds') && this.inertia) { if (!this._checkCanMove && !this._revise('out-of-bounds') && this.inertia) {
......
src/core/view/components/picker-view-column/index.vue
浏览文件 @ 440a131c
<script> <script>
import touchtrack from 'uni-mixins/touchtrack' import touchtrack from 'uni-mixins/touchtrack'
import scroller from 'uni-mixins/scroller/index' import scroller from 'uni-mixins/scroller/index'
import { Friction } from 'uni-mixins/scroller/Friction' import {
import { Spring } from 'uni-mixins/scroller/Spring' Friction
} from 'uni-mixins/scroller/Friction'
function onClick (dom, callback) { import {
const MAX_MOVE = 20 Spring
const hasTouchSupport = navigator.maxTouchPoints } from 'uni-mixins/scroller/Spring'
let x = 0 import {
let y = 0 disableScrollBounce
dom.addEventListener(hasTouchSupport ? 'touchstart' : 'mousedown', (event) => { } from 'uni-shared'
const info = hasTouchSupport ? event.changedTouches[0] : event
x = info.clientX function onClick (dom, callback) {
y = info.clientY const MAX_MOVE = 20
}) const hasTouchSupport = navigator.maxTouchPoints
dom.addEventListener(hasTouchSupport ? 'touchend' : 'mouseup', (event) => { let x = 0
const info = hasTouchSupport ? event.changedTouches[0] : event let y = 0
if (Math.abs(info.clientX - x) < MAX_MOVE && Math.abs(info.clientY - y) < MAX_MOVE) { dom.addEventListener(hasTouchSupport ? 'touchstart' : 'mousedown', (event) => {
callback(info) const info = hasTouchSupport ? event.changedTouches[0] : event
} x = info.clientX
}) y = info.clientY
} })
dom.addEventListener(hasTouchSupport ? 'touchend' : 'mouseup', (event) => {
export default { const info = hasTouchSupport ? event.changedTouches[0] : event
name: 'PickerViewColumn', if (Math.abs(info.clientX - x) < MAX_MOVE && Math.abs(info.clientY - y) < MAX_MOVE) {
mixins: [touchtrack, scroller], callback(info)
data () { }
return { })
scope: `picker-view-column-${Date.now()}`, }
inited: false,
indicatorStyle: '', export default {
indicatorClass: '', name: 'PickerViewColumn',
indicatorHeight: 34, mixins: [touchtrack, scroller],
maskStyle: '', data () {
maskClass: '', return {
current: this.$parent.getItemValue(this), scope: `picker-view-column-${Date.now()}`,
length: 0 inited: false,
} indicatorStyle: '',
}, indicatorClass: '',
computed: { indicatorHeight: 34,
height () { maskStyle: '',
return this.$parent.height maskClass: '',
}, current: this.$parent.getItemValue(this),
maskSize () { length: 0
return (this.height - this.indicatorHeight) / 2 }
} },
}, computed: {
watch: { height () {
indicatorHeight (val) { return this.$parent.height
this._setItemHeight(val) },
if (this.inited) { maskSize () {
this.update() return (this.height - this.indicatorHeight) / 2
} }
}, },
current (val) { watch: {
this.$parent.setItemValue(this, val) indicatorHeight (val) {
}, this._setItemHeight(val)
length (val) { if (this.inited) {
if (this.inited) { this.update()
this.update(val) }
} },
} current (val) {
}, this.$parent.setItemValue(this, val)
created: function () { },
var $parent = this.$parent length (val) {
this.indicatorStyle = $parent.indicatorStyle if (this.inited) {
this.indicatorClass = $parent.indicatorClass this.update(val)
this.maskStyle = $parent.maskStyle }
this.maskClass = $parent.maskClass }
this.deltaY = 0 },
}, created: function () {
mounted: function () { var $parent = this.$parent
this.touchtrack(this.$refs.main, '_handleTrack', true) this.indicatorStyle = $parent.indicatorStyle
this.setCurrent(this.current) this.indicatorClass = $parent.indicatorClass
this.$nextTick(() => { this.maskStyle = $parent.maskStyle
this.init() this.maskClass = $parent.maskClass
this.update() this.deltaY = 0
}) },
onClick(this.$el, this._handleTap.bind(this)) mounted: function () {
}, this.touchtrack(this.$refs.main, '_handleTrack', true)
methods: { this.setCurrent(this.current)
_setItemHeight (height) { this.$nextTick(() => {
var style = document.createElement('style') this.init()
style.innerText = `.uni-picker-view-content.${this.scope}>*{height: ${height}px;overflow: hidden;}` this.update()
document.head.appendChild(style) })
}, onClick(this.$el, this._handleTap.bind(this))
_handleTrack: function (e) { },
if (this._scroller) { methods: {
switch (e.detail.state) { _setItemHeight (height) {
case 'start': var style = document.createElement('style')
style.innerText = `.uni-picker-view-content.${this.scope}>*{height: ${height}px;overflow: hidden;}`
document.head.appendChild(style)
},
_handleTrack: function (e) {
if (this._scroller) {
switch (e.detail.state) {
case 'start':
this._handleTouchStart(e) this._handleTouchStart(e)
break disableScrollBounce({
case 'move': disable: true
this._handleTouchMove(e) })
break break
case 'end': case 'move':
case 'cancel': this._handleTouchMove(e)
break
case 'end':
case 'cancel':
this._handleTouchEnd(e) this._handleTouchEnd(e)
} disableScrollBounce({
} disable: false
}, })
_handleTap: function ({ clientY }) { }
if (!this._scroller.isScrolling()) { }
var rect = this.$el.getBoundingClientRect() },
var r = clientY - rect.top - this.height / 2 _handleTap: function ({
var o = this.indicatorHeight / 2 clientY
if (!(Math.abs(r) <= o)) { }) {
var a = Math.ceil((Math.abs(r) - o) / this.indicatorHeight) if (!this._scroller.isScrolling()) {
var s = r < 0 ? -a : a var rect = this.$el.getBoundingClientRect()
var current = Math.min(this.current + s, this.length - 1) var r = clientY - rect.top - this.height / 2
this.current = current = Math.max(current, 0) var o = this.indicatorHeight / 2
this._scroller.scrollTo(current * this.indicatorHeight) if (!(Math.abs(r) <= o)) {
} var a = Math.ceil((Math.abs(r) - o) / this.indicatorHeight)
} var s = r < 0 ? -a : a
}, var current = Math.min(this.current + s, this.length - 1)
_handleWheel ($event) { this.current = current = Math.max(current, 0)
const deltaY = this.deltaY + $event.deltaY this._scroller.scrollTo(current * this.indicatorHeight)
if (Math.abs(deltaY) > 10) { }
this.deltaY = 0 }
var current = Math.min(this.current + (deltaY < 0 ? -1 : 1), this.length - 1) },
this.current = current = Math.max(current, 0) _handleWheel ($event) {
this._scroller.scrollTo(current * this.indicatorHeight) const deltaY = this.deltaY + $event.deltaY
} else { if (Math.abs(deltaY) > 10) {
this.deltaY = deltaY this.deltaY = 0
} var current = Math.min(this.current + (deltaY < 0 ? -1 : 1), this.length - 1)
$event.preventDefault() this.current = current = Math.max(current, 0)
}, this._scroller.scrollTo(current * this.indicatorHeight)
setCurrent: function (current) { } else {
if (current !== this.current) { this.deltaY = deltaY
this.current = current }
if (this.inited) { $event.preventDefault()
this.update() },
} setCurrent: function (current) {
} if (current !== this.current) {
}, this.current = current
init: function () { if (this.inited) {
this.initScroller(this.$refs.content, { this.update()
enableY: true, }
enableX: false, }
enableSnap: true, },
itemSize: this.indicatorHeight, init: function () {
friction: new Friction(0.0001), this.initScroller(this.$refs.content, {
spring: new Spring(2, 90, 20), enableY: true,
onSnap: (index) => { enableX: false,
if ((!isNaN(index)) && index !== this.current) { enableSnap: true,
this.current = index itemSize: this.indicatorHeight,
} friction: new Friction(0.0001),
} spring: new Spring(2, 90, 20),
}) onSnap: (index) => {
this.inited = true if ((!isNaN(index)) && index !== this.current) {
}, this.current = index
update: function () { }
this.$nextTick(() => { }
var current = Math.min(this.current, this.length - 1) })
current = Math.max(current, 0) this.inited = true
this._scroller.update(current * this.indicatorHeight, undefined, this.indicatorHeight) },
}) update: function () {
}, this.$nextTick(() => {
_resize ({ var current = Math.min(this.current, this.length - 1)
height current = Math.max(current, 0)
}) { this._scroller.update(current * this.indicatorHeight, undefined, this.indicatorHeight)
this.indicatorHeight = height })
} },
}, _resize ({
render (createElement) { height
this.length = (this.$slots.default && this.$slots.default.length) || 0 }) {
return createElement('uni-picker-view-column', { this.indicatorHeight = height
on: { }
wheel: this._handleWheel },
} render (createElement) {
}, [ this.length = (this.$slots.default && this.$slots.default.length) || 0
createElement('div', { return createElement('uni-picker-view-column', {
ref: 'main', on: {
staticClass: 'uni-picker-view-group' wheel: this._handleWheel
}, }
[ }, [
createElement('div', { createElement('div', {
ref: 'mask', ref: 'main',
staticClass: 'uni-picker-view-mask', staticClass: 'uni-picker-view-group'
class: this.maskClass, },
style: `background-size: 100% ${this.maskSize}px;${this.maskStyle}` [
}), createElement('div', {
createElement('div', { ref: 'mask',
ref: 'indicator', staticClass: 'uni-picker-view-mask',
staticClass: 'uni-picker-view-indicator', class: this.maskClass,
class: this.indicatorClass, style: `background-size: 100% ${this.maskSize}px;${this.maskStyle}`
style: this.indicatorStyle }),
}, [createElement('v-uni-resize-sensor', { createElement('div', {
attrs: { ref: 'indicator',
initial: true staticClass: 'uni-picker-view-indicator',
}, class: this.indicatorClass,
on: { style: this.indicatorStyle
resize: this._resize }, [createElement('v-uni-resize-sensor', {
} attrs: {
})]), initial: true
createElement('div', { },
ref: 'content', on: {
staticClass: 'uni-picker-view-content', resize: this._resize
class: this.scope, }
style: `padding: ${this.maskSize}px 0;` })]),
}, createElement('div', {
[this.$slots.default] ref: 'content',
) staticClass: 'uni-picker-view-content',
]) class: this.scope,
] style: `padding: ${this.maskSize}px 0;`
) },
} [this.$slots.default]
} )
</script> ])
<style> ])
uni-picker-view-column { }
-webkit-flex: 1; }
flex: 1; </script>
position: relative; <style>
height: 100%; uni-picker-view-column {
overflow: hidden; -webkit-flex: 1;
} flex: 1;
position: relative;
uni-picker-view-column[hidden] { height: 100%;
display: none; overflow: hidden;
} }
.uni-picker-view-group { uni-picker-view-column[hidden] {
height: 100%; display: none;
} }
.uni-picker-view-mask { .uni-picker-view-group {
transform: translateZ(0); height: 100%;
-webkit-transform: translateZ(0); }
}
.uni-picker-view-mask {
.uni-picker-view-indicator, transform: translateZ(0);
.uni-picker-view-mask { -webkit-transform: translateZ(0);
position: absolute; }
left: 0;
width: 100%; .uni-picker-view-indicator,
z-index: 3; .uni-picker-view-mask {
} position: absolute;
left: 0;
.uni-picker-view-mask { width: 100%;
top: 0; z-index: 3;
height: 100%; }
margin: 0 auto;
background: linear-gradient( .uni-picker-view-mask {
180deg, top: 0;
hsla(0, 0%, 100%, 0.95), height: 100%;
hsla(0, 0%, 100%, 0.6) margin: 0 auto;
), background: linear-gradient(180deg,
linear-gradient(0deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6)); hsla(0, 0%, 100%, 0.95),
background-position: top, bottom; hsla(0, 0%, 100%, 0.6)),
background-size: 100% 102px; linear-gradient(0deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6));
background-repeat: no-repeat; background-position: top, bottom;
} background-size: 100% 102px;
background-repeat: no-repeat;
.uni-picker-view-indicator { }
height: 34px;
/* top: 102px; */ .uni-picker-view-indicator {
top: 50%; height: 34px;
transform: translateY(-50%); /* top: 102px; */
} top: 50%;
transform: translateY(-50%);
.uni-picker-view-indicator, }
.uni-picker-view-mask {
position: absolute; .uni-picker-view-indicator,
left: 0; .uni-picker-view-mask {
width: 100%; position: absolute;
z-index: 3; left: 0;
pointer-events: none; width: 100%;
} z-index: 3;
pointer-events: none;
.uni-picker-view-content { }
position: absolute;
top: 0; .uni-picker-view-content {
left: 0; position: absolute;
width: 100%; top: 0;
will-change: transform; left: 0;
padding: 102px 0; width: 100%;
} will-change: transform;
padding: 102px 0;
.uni-picker-view-content > * { }
height: 34px;
overflow: hidden; .uni-picker-view-content>* {
} height: 34px;
overflow: hidden;
.uni-picker-view-indicator:after, }
.uni-picker-view-indicator:before {
content: " "; .uni-picker-view-indicator:after,
position: absolute; .uni-picker-view-indicator:before {
left: 0; content: " ";
right: 0; position: absolute;
height: 1px; left: 0;
color: #e5e5e5; right: 0;
} height: 1px;
color: #e5e5e5;
.uni-picker-view-indicator:before { }
top: 0;
border-top: 1px solid #e5e5e5; .uni-picker-view-indicator:before {
-webkit-transform-origin: 0 0; top: 0;
transform-origin: 0 0; border-top: 1px solid #e5e5e5;
-webkit-transform: scaleY(0.5); -webkit-transform-origin: 0 0;
transform: scaleY(0.5); transform-origin: 0 0;
} -webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
.uni-picker-view-indicator:after { }
bottom: 0;
border-bottom: 1px solid #e5e5e5; .uni-picker-view-indicator:after {
-webkit-transform-origin: 0 100%; bottom: 0;
transform-origin: 0 100%; border-bottom: 1px solid #e5e5e5;
-webkit-transform: scaleY(0.5); -webkit-transform-origin: 0 100%;
transform: scaleY(0.5); transform-origin: 0 100%;
} -webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
.uni-picker-view-indicator:after, }
.uni-picker-view-indicator:before {
content: " "; .uni-picker-view-indicator:after,
position: absolute; .uni-picker-view-indicator:before {
left: 0; content: " ";
right: 0; position: absolute;
height: 1px; left: 0;
color: #e5e5e5; right: 0;
} height: 1px;
color: #e5e5e5;
}
</style> </style>
src/core/view/components/scroll-view/index.vue
浏览文件 @ 440a131c
...@@ -17,12 +17,13 @@ ...@@ -17,12 +17,13 @@
<script> <script>
import scroller from 'uni-mixins/scroller/index' import scroller from 'uni-mixins/scroller/index'
import { import {
supportsPassive supportsPassive,
disableScrollBounce
} from 'uni-shared' } from 'uni-shared'
const passiveOptions = supportsPassive ? { const passiveOptions = supportsPassive ? {
passive: true passive: true
} : false } : false
export default { export default {
name: 'ScrollView', name: 'ScrollView',
mixins: [scroller], mixins: [scroller],
...@@ -151,8 +152,12 @@ export default { ...@@ -151,8 +152,12 @@ export default {
event.stopPropagation() event.stopPropagation()
} }
} }
this.__handleTouchStart = function (event) { this.__handleTouchStart = function (event) {
if (event.touches.length === 1) { if (event.touches.length === 1) {
disableScrollBounce({
disable: true
})
needStop = null needStop = null
touchStart = { touchStart = {
x: event.touches[0].pageX, x: event.touches[0].pageX,
...@@ -160,11 +165,17 @@ export default { ...@@ -160,11 +165,17 @@ export default {
} }
} }
} }
this.__handleTouchEnd = function (event) {
disableScrollBounce({
disable: false
})
}
this.$refs.main.addEventListener('touchstart', this.__handleTouchStart, passiveOptions) this.$refs.main.addEventListener('touchstart', this.__handleTouchStart, passiveOptions)
this.$refs.main.addEventListener('touchmove', this.__handleTouchMove, passiveOptions) this.$refs.main.addEventListener('touchmove', this.__handleTouchMove, passiveOptions)
this.$refs.main.addEventListener('scroll', this.__handleScroll, supportsPassive ? { this.$refs.main.addEventListener('scroll', this.__handleScroll, supportsPassive ? {
passive: false passive: false
} : false) } : false)
this.$refs.main.addEventListener('touchend', this.__handleTouchEnd, passiveOptions)
}, },
activated () { activated () {
// 还原 scroll-view 滚动位置 // 还原 scroll-view 滚动位置
...@@ -177,6 +188,7 @@ export default { ...@@ -177,6 +188,7 @@ export default {
this.$refs.main.removeEventListener('scroll', this.__handleScroll, supportsPassive ? { this.$refs.main.removeEventListener('scroll', this.__handleScroll, supportsPassive ? {
passive: false passive: false
} : false) } : false)
this.$refs.main.removeEventListener('touchend', this.__handleTouchEnd, passiveOptions)
}, },
methods: { methods: {
scrollTo: function (t, n) { scrollTo: function (t, n) {
...@@ -359,7 +371,6 @@ export default { ...@@ -359,7 +371,6 @@ export default {
main.style.overflowY = this.scrollY ? 'auto' : 'hidden' main.style.overflowY = this.scrollY ? 'auto' : 'hidden'
main.scrollTop = val main.scrollTop = val
} }
this.$refs.content.removeEventListener('transitionend', this.__transitionEnd) this.$refs.content.removeEventListener('transitionend', this.__transitionEnd)
this.$refs.content.removeEventListener('webkitTransitionEnd', this.__transitionEnd) this.$refs.content.removeEventListener('webkitTransitionEnd', this.__transitionEnd)
}, },
......
src/shared/index.js
浏览文件 @ 440a131c
...@@ -2,3 +2,4 @@ export * from './env' ...@@ -2,3 +2,4 @@ export * from './env'
export * from './util' export * from './util'
export * from './color' export * from './color'
export * from './query' export * from './query'
export * from './scroll'
src/shared/scroll.js 0 → 100644
浏览文件 @ 440a131c
let view
let pullToRefreshStyle
let disabled
export function disableScrollBounce ({ disable }) {
function exec () {
if (!view) {
view = plus.webview.currentWebview()
}
if (!disabled) {
pullToRefreshStyle = (view.getStyle() || {}).pullToRefresh || {}
}
disabled = disable
if (pullToRefreshStyle.support) {
view.setPullToRefresh(Object.assign({}, pullToRefreshStyle, {
support: !disable
}))
}
}
if (plus.os.name === 'iOS') {
// 延迟执行避免iOS13触摸卡死
setTimeout(exec, 20)
} else {
exec()
}
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或