提交 1823aa00 编写于 作者: 2 23700113@qq.com

fix(h5): 修复actionSheet在h5端,数据量多无法滚动

上级 2f420ce3
......@@ -12,7 +12,17 @@
:style="popupStyle.content"
class="uni-actionsheet"
>
<div class="uni-actionsheet__menu">
<div
ref="main"
class="uni-actionsheet__menu"
@wheel="_handleWheel"
>
<!-- title占位 -->
<div
v-if="title"
class="uni-actionsheet__cell"
:style="{height:`${titleHeight}px`}"
/>
<div
v-if="title"
class="uni-actionsheet__title"
......@@ -20,13 +30,21 @@
{{ title }}
</div>
<div
v-for="(itemTitle, index) in itemList"
:key="index"
:style="{ color: itemColor }"
class="uni-actionsheet__cell"
@click="_close(index)"
:style="{maxHeight:`${HEIGHT}px`,overflow:'hidden'}"
>
{{ itemTitle }}
<div
ref="content"
>
<div
v-for="(itemTitle, index) in itemList"
:key="index"
:style="{ color: itemColor }"
class="uni-actionsheet__cell"
@click="_close(index)"
>
{{ itemTitle }}
</div>
</div>
</div>
</div>
<div class="uni-actionsheet__action">
......@@ -49,11 +67,50 @@
<script>
import popup from './mixins/popup'
import keypress from '../../../helpers/keypress'
import touchtrack from 'uni-mixins/touchtrack'
import scroller from 'uni-mixins/scroller/index'
import {
Friction
} from 'uni-mixins/scroller/Friction'
import {
Spring
} from 'uni-mixins/scroller/Spring'
import {
initScrollBounce,
disableScrollBounce
} from 'uni-platform/helpers/scroll'
// 由于模拟滚动阻止了点击,使用自定义事件来触发点击事件
function initClick (dom) {
const MAX_MOVE = 20
let x = 0
let y = 0
dom.addEventListener('touchstart', (event) => {
const info = event.changedTouches[0]
x = info.clientX
y = info.clientY
})
dom.addEventListener('touchend', (event) => {
const info = event.changedTouches[0]
if (Math.abs(info.clientX - x) < MAX_MOVE && Math.abs(info.clientY - y) < MAX_MOVE) {
const customEvent = new CustomEvent('click', {
bubbles: true,
cancelable: true,
target: event.target,
currentTarget: event.currentTarget
});
['screenX', 'screenY', 'clientX', 'clientY', 'pageX', 'pageY'].forEach(key => {
customEvent[key] = info[key]
})
event.target.dispatchEvent(customEvent)
}
})
}
export default {
name: 'ActionSheet',
components: { keypress },
mixins: [popup],
mixins: [popup, touchtrack, scroller],
props: {
title: {
type: String,
......@@ -78,9 +135,87 @@ export default {
default: false
}
},
data () {
return {
HEIGHT: 260,
contentHeight: 0,
titleHeight: 0,
deltaY: 0,
scrollTop: 0
}
},
watch: {
visible (newValue) {
if (newValue) {
this.$nextTick(() => {
// title 占位
if (this.title) { this.titleHeight = document.querySelector('.uni-actionsheet__title').offsetHeight }
// 滚动条更新
this._scroller.update()
// 获取contentHeight 滚动时使用
this.contentHeight = this.$refs.content.clientHeight - this.HEIGHT
// 给每一个项添加点击事件
document.querySelectorAll('.uni-actionsheet__cell').forEach(item => {
initClick(item)
})
})
}
}
},
mounted () {
// 模拟滚动使用
this.touchtrack(this.$refs.content, '_handleTrack', true)
this.$nextTick(() => {
this.initScroller(this.$refs.content, {
enableY: true,
friction: new Friction(0.0001),
spring: new Spring(2, 90, 20),
onScroll: (e) => {
this.scrollTop = e.target.scrollTop
}
})
})
initScrollBounce()
},
methods: {
_close (tapIndex) {
this.$emit('close', tapIndex)
},
_handleTrack: function (e) {
if (this._scroller) {
switch (e.detail.state) {
case 'start':
this._handleTouchStart(e)
disableScrollBounce({
disable: true
})
break
case 'move':
this._handleTouchMove(e)
break
case 'end':
case 'cancel':
this._handleTouchEnd(e)
disableScrollBounce({
disable: false
})
}
}
},
_handleWheel ($event) {
const deltaY = this.deltaY + $event.deltaY
if (Math.abs(deltaY) > 10) {
this.scrollTop += deltaY / 3
this.scrollTop = this.scrollTop >= this.contentHeight
? this.contentHeight
: this.scrollTop <= 0
? 0
: this.scrollTop
this._scroller.scrollTo(this.scrollTop)
} else {
this.deltaY = deltaY
}
$event.preventDefault()
}
}
}
......@@ -133,6 +268,17 @@ uni-actionsheet .uni-actionsheet__title {
cursor: pointer;
}
uni-actionsheet .uni-actionsheet__title{
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
background-color: #fff;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid #e5e5e5;
}
uni-actionsheet .uni-actionsheet__cell:before {
content: " ";
position: absolute;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册