123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 |
- <template>
- <view style="display: none;">
- <slot />
- </view>
- </template>
- <script>
- import { onMounted } from 'vue'
- // #ifndef H5
- import { onResize } from '@dcloudio/uni-app'
- // #endif
- // #ifdef H5
- import { onWindowResize } from '@dcloudio/uni-h5'
- // #endif
- const scrolldoneEvent = {
- type: 'scrolldone',
- target: {
- id: '',
- offsetLeft: 0,
- offsetTop: 0,
- dataset: {}
- },
- currentTarget: {
- id: '',
- offsetLeft: 0,
- offsetTop: 0,
- dataset: {}
- },
- detail: {}
- }
- export default {
- name: 'PageMeta',
- setup(props, { emit }) {
- // #ifndef H5
- onResize((evt) => {
- emit('resize', evt)
- })
- // #endif
- // #ifdef H5
- onMounted(() => {
- onWindowResize(evt => {
- emit('resize', evt)
- })
- })
- // #endif
- // let currentInstance = getCurrentInstance()
- // let proxy = currentInstance.proxy
- // onPageScroll((evt) => {
- // if (proxy._invokePageScrollToFlag === true && evt.scrollTop === proxy._invokeScrollTop) {
- // proxy._invokePageScrollToFlag = false
- // emit('scrolldone', scrolldoneEvent)
- // }
- // })
- },
- props: {
- backgroundTextStyle: {
- type: String,
- default: 'dark',
- validator (value) {
- return ['dark', 'light'].indexOf(value) !== -1
- }
- },
- backgroundColor: {
- type: String,
- default: '#ffffff'
- },
- backgroundColorTop: {
- type: String,
- default: '#ffffff'
- },
- backgroundColorBottom: {
- type: String,
- default: '#ffffff'
- },
- scrollTop: {
- type: String,
- default: ''
- },
- scrollDuration: {
- type: Number,
- default: 300
- },
- pageStyle: {
- type: String,
- default: ''
- },
- enablePullDownRefresh: {
- type: [Boolean, String],
- default: false
- },
- rootFontSize: {
- type: String,
- default: ''
- }
- },
- created () {
- const page = getCurrentPages()[0]
- this.$pageVm = page.$vm || page
- // #ifdef APP-PLUS
- this._currentWebview = page.$getAppWebview()
- if (this.enablePullDownRefresh) {
- this.setPullDownRefresh(this._currentWebview, true)
- }
- this.$watch('enablePullDownRefresh', (val) => {
- this.setPullDownRefresh(this._currentWebview, val)
- })
- // #endif
- // props
- this.$watch('backgroundTextStyle', () => {
- this.setBackgroundTextStyle()
- })
- this.$watch(() => [
- this.rootFontSize,
- this.pageStyle
- ], () => {
- this.setPageMeta()
- })
- this.$watch(() => [
- this.backgroundColor,
- this.backgroundColorTop,
- this.backgroundColorBottom
- ], () => {
- this.setBackgroundColor()
- })
- this.$watch(() => [
- this.scrollTop,
- this.scrollDuration
- ], () => {
- this.pageScrollTo()
- })
- // this._invokeScrollTop = -1
- // this._invokePageScrollToFlag = false
- },
- beforeMount () {
- this.setBackgroundColor()
- if (this.rootFontSize || this.pageStyle) {
- this.setPageMeta()
- }
- this.backgroundTextStyle && this.setBackgroundTextStyle()
- },
- mounted() {
- this.scrollTop && this.pageScrollTo()
- },
- methods: {
- setPullDownRefresh (webview, enabled) {
- webview.setStyle({
- pullToRefresh: {
- support: enabled,
- style: plus.os.name === 'Android' ? 'circle' : 'default'
- }
- })
- },
- setPageMeta () {
- // h5 和 app-plus 设置 rootFontSize
- // #ifdef H5 || APP-PLUS
- uni.setPageMeta({
- pageStyle: this.pageStyle,
- rootFontSize: this.rootFontSize
- })
- // #endif
- },
- setBackgroundTextStyle () {
- // TODO h5 app-plus 暂不支持
- // #ifdef MP
- uni.setBackgroundTextStyle && uni.setBackgroundTextStyle({
- textStyle: this.backgroundTextStyle
- })
- // #endif
- },
- setBackgroundColor () {
- // TODO h5 app-plus 暂不支持
- // #ifdef MP
- uni.setBackgroundColor && uni.setBackgroundColor({
- backgroundColor: this.backgroundColor,
- backgroundColorTop: this.backgroundColorTop,
- backgroundColorBottom: this.backgroundColorBottom
- })
- // #endif
- },
- pageScrollTo () {
- let scrollTop = String(this.scrollTop)
- if (scrollTop.indexOf('rpx') !== -1) {
- scrollTop = uni.upx2px(scrollTop.replace('rpx', ''))
- }
- scrollTop = parseFloat(scrollTop)
- if (isNaN(scrollTop)) {
- return
- }
- // this._invokeScrollTop = scrollTop
- uni.pageScrollTo({
- scrollTop,
- duration: this.scrollDuration,
- success: () => {
- //this._invokePageScrollToFlag = true
- }
- })
- }
- }
- }
- </script>
|