page-meta.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. <template>
  2. <view style="display: none;">
  3. <slot />
  4. </view>
  5. </template>
  6. <script>
  7. import { onMounted } from 'vue'
  8. // #ifndef H5
  9. import { onResize } from '@dcloudio/uni-app'
  10. // #endif
  11. // #ifdef H5
  12. import { onWindowResize } from '@dcloudio/uni-h5'
  13. // #endif
  14. const scrolldoneEvent = {
  15. type: 'scrolldone',
  16. target: {
  17. id: '',
  18. offsetLeft: 0,
  19. offsetTop: 0,
  20. dataset: {}
  21. },
  22. currentTarget: {
  23. id: '',
  24. offsetLeft: 0,
  25. offsetTop: 0,
  26. dataset: {}
  27. },
  28. detail: {}
  29. }
  30. export default {
  31. name: 'PageMeta',
  32. setup(props, { emit }) {
  33. // #ifndef H5
  34. onResize((evt) => {
  35. emit('resize', evt)
  36. })
  37. // #endif
  38. // #ifdef H5
  39. onMounted(() => {
  40. onWindowResize(evt => {
  41. emit('resize', evt)
  42. })
  43. })
  44. // #endif
  45. // let currentInstance = getCurrentInstance()
  46. // let proxy = currentInstance.proxy
  47. // onPageScroll((evt) => {
  48. // if (proxy._invokePageScrollToFlag === true && evt.scrollTop === proxy._invokeScrollTop) {
  49. // proxy._invokePageScrollToFlag = false
  50. // emit('scrolldone', scrolldoneEvent)
  51. // }
  52. // })
  53. },
  54. props: {
  55. backgroundTextStyle: {
  56. type: String,
  57. default: 'dark',
  58. validator (value) {
  59. return ['dark', 'light'].indexOf(value) !== -1
  60. }
  61. },
  62. backgroundColor: {
  63. type: String,
  64. default: '#ffffff'
  65. },
  66. backgroundColorTop: {
  67. type: String,
  68. default: '#ffffff'
  69. },
  70. backgroundColorBottom: {
  71. type: String,
  72. default: '#ffffff'
  73. },
  74. scrollTop: {
  75. type: String,
  76. default: ''
  77. },
  78. scrollDuration: {
  79. type: Number,
  80. default: 300
  81. },
  82. pageStyle: {
  83. type: String,
  84. default: ''
  85. },
  86. enablePullDownRefresh: {
  87. type: [Boolean, String],
  88. default: false
  89. },
  90. rootFontSize: {
  91. type: String,
  92. default: ''
  93. }
  94. },
  95. created () {
  96. const page = getCurrentPages()[0]
  97. this.$pageVm = page.$vm || page
  98. // #ifdef APP-PLUS
  99. this._currentWebview = page.$getAppWebview()
  100. if (this.enablePullDownRefresh) {
  101. this.setPullDownRefresh(this._currentWebview, true)
  102. }
  103. this.$watch('enablePullDownRefresh', (val) => {
  104. this.setPullDownRefresh(this._currentWebview, val)
  105. })
  106. // #endif
  107. // props
  108. this.$watch('backgroundTextStyle', () => {
  109. this.setBackgroundTextStyle()
  110. })
  111. this.$watch(() => [
  112. this.rootFontSize,
  113. this.pageStyle
  114. ], () => {
  115. this.setPageMeta()
  116. })
  117. this.$watch(() => [
  118. this.backgroundColor,
  119. this.backgroundColorTop,
  120. this.backgroundColorBottom
  121. ], () => {
  122. this.setBackgroundColor()
  123. })
  124. this.$watch(() => [
  125. this.scrollTop,
  126. this.scrollDuration
  127. ], () => {
  128. this.pageScrollTo()
  129. })
  130. // this._invokeScrollTop = -1
  131. // this._invokePageScrollToFlag = false
  132. },
  133. beforeMount () {
  134. this.setBackgroundColor()
  135. if (this.rootFontSize || this.pageStyle) {
  136. this.setPageMeta()
  137. }
  138. this.backgroundTextStyle && this.setBackgroundTextStyle()
  139. },
  140. mounted() {
  141. this.scrollTop && this.pageScrollTo()
  142. },
  143. methods: {
  144. setPullDownRefresh (webview, enabled) {
  145. webview.setStyle({
  146. pullToRefresh: {
  147. support: enabled,
  148. style: plus.os.name === 'Android' ? 'circle' : 'default'
  149. }
  150. })
  151. },
  152. setPageMeta () {
  153. // h5 和 app-plus 设置 rootFontSize
  154. // #ifdef H5 || APP-PLUS
  155. uni.setPageMeta({
  156. pageStyle: this.pageStyle,
  157. rootFontSize: this.rootFontSize
  158. })
  159. // #endif
  160. },
  161. setBackgroundTextStyle () {
  162. // TODO h5 app-plus 暂不支持
  163. // #ifdef MP
  164. uni.setBackgroundTextStyle && uni.setBackgroundTextStyle({
  165. textStyle: this.backgroundTextStyle
  166. })
  167. // #endif
  168. },
  169. setBackgroundColor () {
  170. // TODO h5 app-plus 暂不支持
  171. // #ifdef MP
  172. uni.setBackgroundColor && uni.setBackgroundColor({
  173. backgroundColor: this.backgroundColor,
  174. backgroundColorTop: this.backgroundColorTop,
  175. backgroundColorBottom: this.backgroundColorBottom
  176. })
  177. // #endif
  178. },
  179. pageScrollTo () {
  180. let scrollTop = String(this.scrollTop)
  181. if (scrollTop.indexOf('rpx') !== -1) {
  182. scrollTop = uni.upx2px(scrollTop.replace('rpx', ''))
  183. }
  184. scrollTop = parseFloat(scrollTop)
  185. if (isNaN(scrollTop)) {
  186. return
  187. }
  188. // this._invokeScrollTop = scrollTop
  189. uni.pageScrollTo({
  190. scrollTop,
  191. duration: this.scrollDuration,
  192. success: () => {
  193. //this._invokePageScrollToFlag = true
  194. }
  195. })
  196. }
  197. }
  198. }
  199. </script>