page-meta.uvue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <template>
  2. <page-meta
  3. :background-text-style="bgTextStyle"
  4. :background-color="bgColor"
  5. :background-color-top="bgColorTop"
  6. :background-color-bottom="bgColorBottom"
  7. :scroll-top="scrollTop"
  8. :scroll-duration="2000"
  9. @scroll="scroll"
  10. @scrolldone="scrolldone"
  11. page-style="color: green"
  12. root-font-size="30px"
  13. >
  14. <navigation-bar
  15. :title="nbTitle"
  16. :loading="nbLoading"
  17. :front-color="nbFrontColor"
  18. :background-color="nbBackgroundColor"
  19. />
  20. </page-meta>
  21. <view class="content">
  22. <text class="title">页面内容</text>
  23. <button @click="scrollTo">点击跳到 300px 处</button>
  24. <view class="uni-list" v-for="(_, index) in 30" :key="index">
  25. <view class="uni-list-cell">{{ index }}</view>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. export default {
  31. data() {
  32. return {
  33. bgTextStyle: 'dark',
  34. scrollTop: '0px',
  35. bgColor: '#ff0000',
  36. bgColorTop: '#00ff00',
  37. bgColorBottom: '#0000ff',
  38. nbTitle: '标题',
  39. nbLoading: false,
  40. nbFrontColor: '#ffffff',
  41. nbBackgroundColor: '#00aaff',
  42. // 自动化测试
  43. scrollType:null,
  44. scrolldoneType:null,
  45. }
  46. },
  47. onLoad() {
  48. setTimeout(()=>{
  49. this.nbLoading = true
  50. },2000)
  51. },
  52. methods: {
  53. scrollTo(){
  54. this.scrollTop = '300px'
  55. },
  56. scroll(e){
  57. this.scrollType=e.type
  58. },
  59. scrolldone(e){
  60. this.scrolldoneType=e.type
  61. }
  62. }
  63. }
  64. </script>