• uniapp上拉加载、下拉刷新


    我这个是自定义header、main、和footer的布局,是盒子中的上拉加载、下拉刷新,不是页面的,废话不说,直接上代码!

    1. <template>
    2. <view class="assembly">
    3. <u-navbar title="个人中心" @leftClick="leftClick" :autoBack="true">
    4. u-navbar>
    5. <view class="main">
    6. <scroll-view
    7. scroll-y
    8. class="scrollbox"
    9. @scrolltolower="lower"
    10. refresher-enabled="true"
    11. :refresher-triggered="trigger"
    12. @refresherrefresh="refresherrefresh"
    13. show-scrollbar="false"
    14. >
    15. <text
    16. style="line-height: 40px; display: block"
    17. v-for="(item, index) in 20"
    18. >{{ index }}
    19. >
    20. <view class="loading-wrap">
    21. <view class="loading-text" v-if="loadingFlag == 1"
    22. >数据加载中...
    23. >
    24. <view class="loading-text" v-if="loadingFlag == 2"
    25. >没有更多的数据...
    26. >
    27. view>
    28. scroll-view>
    29. view>
    30. <view class="footer-bar">view>
    31. view>
    32. template>
    33. <script>
    34. export default {
    35. data() {
    36. return {
    37. trigger: false,
    38. loadingFlag: 1,
    39. };
    40. },
    41. methods: {
    42. leftClick() {
    43. console.log("返回上一页");
    44. },
    45. // 上拉加载
    46. lower() {
    47. console.log("触底加载11");
    48. },
    49. // 下拉刷新
    50. refresherrefresh() {
    51. const _that = this;
    52. this.trigger = true;
    53. setTimeout(() => {
    54. _that.trigger = false;
    55. }, 3000);
    56. },
    57. },
    58. };
    59. script>
    60. <style lang="scss">
    61. .assembly {
    62. width: 100vw;
    63. height: 100vh;
    64. // 头部返回
    65. ::v-deep .u-navbar {
    66. height: 50px;
    67. }
    68. // 内容
    69. .main {
    70. width: 100%;
    71. height: calc(100vh - 50px - 50px);
    72. background-color: pink;
    73. overflow: auto;
    74. // 这个是scroll-view的盒子样式,必须要有,要不然不会触发 触底滚动事件
    75. .scrollbox {
    76. width: 100%;
    77. height: 100%;
    78. }
    79. // 加载更多
    80. .loading-wrap {
    81. width: 100%;
    82. height: 30px;
    83. background-color: yellow;
    84. .loading-text {
    85. font-size: $uni-size-loading-text;
    86. text-align: center;
    87. line-height: 30px;
    88. }
    89. }
    90. }
    91. // 页脚
    92. .footer-bar {
    93. width: 100%;
    94. height: 50px;
    95. background-color: red;
    96. position: fixed;
    97. bottom: 0;
    98. right: 0;
    99. }
    100. }
    101. style>

  • 相关阅读:
    LSM Tree 深度解析
    Hadoop总结
    对软件建模的全面认识
    Git命令大全
    前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第五章 组件库安装和使用(Element-Plus基础配置)
    computed计算属性
    雪糕冰淇淋经营配送小程序商城效果如何
    C++——关键字|命名空间|输入&输出|缺省参数|函数重载|引用
    一文详细讲解JAVA开发中的XML
    ESXI配置免密登录
  • 原文地址:https://blog.csdn.net/m0_58361435/article/details/136470689