Commit 91e66996 authored by JingChao's avatar JingChao

Update index.vue

parent d7258427
......@@ -188,6 +188,9 @@ export default {
bubbleY: 0, // 气泡y坐标,
isIos: false,
fullScreen: true,
fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')),
winHeight: window.innerHeight,
winWidth: window.innerWidth,
}
},
computed: {
......@@ -232,6 +235,60 @@ export default {
})
},
methods: {
getHeaderHeight () {
let vm = this
let $el = vm.$el.previousElementSibling
let headerHeight = 0
do {
if ($el) {
let elHeight = window.getComputedStyle($el).height
let part = /^\d+(\.\d+)?px$/
if (elHeight && part.test(elHeight)) {
headerHeight += Number(elHeight.replace('px', ''))
}
if ($el._prevClass && $el._prevClass.indexOf('h-header') === 0) {
if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
headerHeight += 0.8 * vm.fontSize
} else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
headerHeight += 0.8 * vm.fontSize
} else if (detectOS() === 'ios') {
headerHeight += 0.4 * vm.fontSize
}
}
$el = $el.previousElementSibling
}
} while ($el)
return headerHeight
},
getNextElementHeight () {
let vm = this
let nextElement = this.$el.nextElementSibling
let nextHeight = 0
do {
if (nextElement) {
let elHeight = window.getComputedStyle(nextElement).height
let part = /^\d+(\.\d+)?px$/
if (elHeight && part.test(elHeight)) {
nextHeight += Number(elHeight.replace('px', ''))
}
if (nextElement._prevClass && nextElement._prevClass.indexOf('h-bottom-tab') === 0) {
let height = nextElement.clientHeight
if (detectOS() === 'ios' && height > Math.ceil(vm.fontSize * 0.88)) {
nextHeight += 0
} else {
if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
nextHeight += vm.fontSize * 0.68
} else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
nextHeight += vm.fontSize * 0.68
}
}
}
nextElement = nextElement.nextElementSibling
}
} while (nextElement)
return nextHeight
},
// 初始化scroll
initScroll () {
let vm = this
......@@ -239,7 +296,10 @@ export default {
// 设置scrollContent的最小高,实现高度不足时也有回弹效果
if (this.$refs.scrollContent) {
const headerHeight = vm.getHeaderHeight()
// const nextHeight = vm.getNextElementHeight()
this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height + 1}px`
this.$refs.scrollContent.style.paddingTop = `${headerHeight}px`
if (vm.hasFoot.footFlag) {
let height = vm.hasFoot.height || 88
// this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height - height}px`
......@@ -406,9 +466,10 @@ export default {
//$ = vue-better-scroll
.vue-better-scroll {
width 100%
overflow hidden
overflow hidden !important
box-sizing border-box
position relative
position absolute !important
top 0
height 100%
&__wrapper {
......@@ -422,7 +483,7 @@ export default {
text-size-adjust: none;
-webkit-transform-origin: left top;
transform-origin: left top;
padding-bottom: 0.9rem;
padding-bottom: 0.4rem;
}
&__pullup {
......@@ -461,20 +522,24 @@ export default {
}
}
}
.has-footer {
.vue-better-scroll__wrapper {
padding-bottom: 1rem;
}
}
.platform-ios{
.vue-better-scroll {
&__wrapper {
// padding-bottom: 2.16rem;
.has-footer {
.vue-better-scroll__wrapper {
padding-bottom: 1rem;
}
}
}
// iPhoneX适配
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios {
.vue-better-scroll {
&__wrapper {
// padding-bottom: 2.84rem;
.has-footer {
.vue-better-scroll__wrapper {
padding-bottom: 1.8rem;
}
}
}
......@@ -483,9 +548,9 @@ export default {
// iPhoneX Max适配
@media (device-width: 414px) and (device-height: 896px) {
.platform-ios {
.vue-better-scroll {
&__wrapper {
// padding-bottom: 2.84rem;
.has-footer {
.vue-better-scroll__wrapper {
padding-bottom: 1.8rem;
}
}
}
......
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