Commit 13ac9ef2 authored by JingChao's avatar JingChao

scroll与notify组件修改

parent 63a57615
...@@ -111,7 +111,7 @@ export default { ...@@ -111,7 +111,7 @@ export default {
position: absolute; position: absolute;
left: 0; left: 0;
text-align: center; text-align: center;
z-index: 5; z-index: 30;
&-top { &-top {
top: 0; top: 0;
......
...@@ -87,7 +87,8 @@ export default { ...@@ -87,7 +87,8 @@ export default {
do { do {
if ($el) { if ($el) {
let elHeight = window.getComputedStyle($el).height let elHeight = window.getComputedStyle($el).height
if (elHeight) { let part = /^\d+(\.\d+)?px$/
if (elHeight && part.test(elHeight)) {
headerHeight += Number(elHeight.replace('px', '')) headerHeight += Number(elHeight.replace('px', ''))
} }
if ($el._prevClass && $el._prevClass.indexOf('h-header') === 0) { if ($el._prevClass && $el._prevClass.indexOf('h-header') === 0) {
...@@ -112,7 +113,8 @@ export default { ...@@ -112,7 +113,8 @@ export default {
do { do {
if (nextElement) { if (nextElement) {
let elHeight = window.getComputedStyle(nextElement).height let elHeight = window.getComputedStyle(nextElement).height
if (elHeight) { let part = /^\d+(\.\d+)?px$/
if (elHeight && part.test(elHeight)) {
nextHeight += Number(elHeight.replace('px', '')) nextHeight += Number(elHeight.replace('px', ''))
} }
if (nextElement._prevClass && nextElement._prevClass.indexOf('h-bottom-tab') === 0) { if (nextElement._prevClass && nextElement._prevClass.indexOf('h-bottom-tab') === 0) {
......
...@@ -5,18 +5,10 @@ ...@@ -5,18 +5,10 @@
*/ */
<template> <template>
<div ref="scroll" :class="[c(),{'h-ios': isIos}]" class="content"> <div ref="scroll" :class="[c(),{'h-ios': isIos}]" class="content scroll-content">
<div :class="c('__wrapper')"> <div :class="c('__wrapper')">
<div <div ref="scrollContent" class="scrollContent">
ref="scrollContent" class="scrollContent"
@contextmenu="preventDefault"
@touchend="end"
@touchstart="start"
@touchcancel="end"
@mousedown="start"
@mouseup="end"
@mouseleave="end">
<slot/> <slot/>
</div> </div>
...@@ -65,14 +57,10 @@ import BScroll from 'better-scroll' ...@@ -65,14 +57,10 @@ import BScroll from 'better-scroll'
import Loading from './loading' import Loading from './loading'
import Bubble from './bubble' import Bubble from './bubble'
import mixin from './mixins' import mixin from './mixins'
import { timeout } from './utils' import {timeout} from './utils'
import { detectOS } from '../../common/utils/index' import { detectOS } from '../../common/utils/index'
let currenTranslateY = 0
let scollHeight = 0
let minHeight = 0
let globleThis = null
let paddingBottom = 0
export default { export default {
name: 'Scroll', name: 'Scroll',
components: { components: {
...@@ -140,7 +128,7 @@ export default { ...@@ -140,7 +128,7 @@ export default {
type: Object, type: Object,
default: () => ({ default: () => ({
threshold: 100, // 提前触发 pullingUp 的距离 threshold: 100, // 提前触发 pullingUp 的距离
txt: { more: '上拉加载', noMore: '— 我是有底线的 —' }, txt: {more: '上拉加载', noMore: '— 我是有底线的 —'},
}), }),
}, },
startY: { startY: {
...@@ -200,7 +188,6 @@ export default { ...@@ -200,7 +188,6 @@ export default {
bubbleY: 0, // 气泡y坐标, bubbleY: 0, // 气泡y坐标,
isIos: false, isIos: false,
fullScreen: true, fullScreen: true,
} }
}, },
computed: { computed: {
...@@ -227,7 +214,6 @@ export default { ...@@ -227,7 +214,6 @@ export default {
await this.$nextTick() await this.$nextTick()
this.refresh() this.refresh()
}, },
}, },
created () { created () {
...@@ -244,28 +230,6 @@ export default { ...@@ -244,28 +230,6 @@ export default {
}, { }, {
deep: true, deep: true,
}) })
window.addEventListener('native.keyboardhide', function (e) {
console.log('native.keyboardhide')
if (currenTranslateY) {
console.dir(globleThis)
globleThis.$refs.scrollContent.style.paddingBottom = paddingBottom + 'px'
globleThis.$refs.scrollContent.style.minHeight = minHeight + 'px'
globleThis.scrollTo(0, -(currenTranslateY))
}
})
window.addEventListener('native.keyboardshow', function (e) {
console.log('native.keyboardshow')
console.log('scollHeight:' + scollHeight)
console.log('currenTranslateY:' + currenTranslateY)
if (scollHeight) {
console.dir(globleThis)
paddingBottom = Number(globleThis.$refs.scrollContent.style.paddingBottom)
// vm.$refs.scrollContent.style.minHeight = `${minHeight + scollHeight + 100}px`
globleThis.$refs.scrollContent.style.paddingBottom = (paddingBottom + scollHeight + 100) + 'px'
globleThis.scrollTo(0, -(currenTranslateY + scollHeight))
}
})
}, },
methods: { methods: {
// 初始化scroll // 初始化scroll
...@@ -276,7 +240,6 @@ export default { ...@@ -276,7 +240,6 @@ export default {
// 设置scrollContent的最小高,实现高度不足时也有回弹效果 // 设置scrollContent的最小高,实现高度不足时也有回弹效果
if (this.$refs.scrollContent) { if (this.$refs.scrollContent) {
this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height + 1}px` this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height + 1}px`
minHeight = Number(`${this.$refs.scroll.getBoundingClientRect().height + 1}`)
if (vm.hasFoot.footFlag) { if (vm.hasFoot.footFlag) {
let height = vm.hasFoot.height || 88 let height = vm.hasFoot.height || 88
// this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height - height}px` // this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height - height}px`
...@@ -422,7 +385,6 @@ export default { ...@@ -422,7 +385,6 @@ export default {
*/ */
scrollTo (x = 0, y = 0, time = this.bounceTime) { scrollTo (x = 0, y = 0, time = this.bounceTime) {
this.scroll && this.scroll.scrollTo(x, y, time) this.scroll && this.scroll.scrollTo(x, y, time)
console.log(y)
}, },
// 滚动到元素 // 滚动到元素
scrollToElement () { scrollToElement () {
...@@ -436,36 +398,6 @@ export default { ...@@ -436,36 +398,6 @@ export default {
scrollToBottom () { scrollToBottom () {
this.scroll && this.scrollTo(0, this.scroll.maxScrollY) this.scroll && this.scrollTo(0, this.scroll.maxScrollY)
}, },
getKeyboardHeight () {
let innerWidth = window.innerWidth
if (this.isIos) {
if (innerWidth >= 375 && innerHeight >= 812) {
return 400
}
return 370
} else {
return 275
}
},
preventDefault (e) {
// 移动浏览器中长按元素会触发显示菜单,导致touchend事件不会触发,需要阻止该行为
e.preventDefault()
},
start (e) {
},
end: function (e) {
let vm = globleThis = this
if (e.target.readOnly) return
if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA') {
const vueScrollElement = vm.$refs.scroll.children[0]
currenTranslateY = Number(vueScrollElement.style.transform.match(/\d+(.\d+)?/g)[1])
const pointY = e.changedTouches[0].clientY
const innerHeight = window.innerHeight
const keyBoardHeight = this.getKeyboardHeight()
scollHeight = (innerHeight - pointY) < keyBoardHeight ? (keyBoardHeight - (innerHeight - pointY)) : 0
}
},
}, },
} }
</script> </script>
...@@ -478,7 +410,6 @@ export default { ...@@ -478,7 +410,6 @@ export default {
box-sizing border-box box-sizing border-box
position relative position relative
height 100% height 100%
overflow-y hidden !important
&__wrapper { &__wrapper {
-webkit-user-select: none; -webkit-user-select: none;
...@@ -491,6 +422,7 @@ export default { ...@@ -491,6 +422,7 @@ export default {
text-size-adjust: none; text-size-adjust: none;
-webkit-transform-origin: left top; -webkit-transform-origin: left top;
transform-origin: left top; transform-origin: left top;
padding-bottom: 0.9rem;
} }
&__pullup { &__pullup {
...@@ -530,14 +462,13 @@ export default { ...@@ -530,14 +462,13 @@ export default {
} }
} }
.platform-ios { .platform-ios{
.vue-better-scroll { .vue-better-scroll {
&__wrapper { &__wrapper {
// padding-bottom: 2.16rem; // padding-bottom: 2.16rem;
} }
} }
} }
// iPhoneX适配 // iPhoneX适配
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios { .platform-ios {
......
File deleted
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment