Skip to content
索引

滚动操作

滚动底部触发事件

滚动到底部/右边,会触发 scrolltolower 事件

html
 <scroll-view class="main_box" scroll-y="true" @scrolltolower="lower">
 </scroll-view>
 <scroll-view class="main_box" scroll-y="true" @scrolltolower="lower">
 </scroll-view>

滚动到底加载更多

淘宝的滚动到底请求数据方案

  • 滚动不出现toast加载中弹窗,而是在最底部显示一行灰色的loading图标+加载文本,不仔细看都看不到
  • 一次渲染大概十几条数据
  • 应当滚动时就请求下次数据,避免滚动卡顿

csdn的滚动到底请求数据方案

  • 骨架屏站位

自定义开局启动动画

https://ext.dcloud.net.cn/plugin?id=73751

下拉刷新

全局开启下拉刷新

pages.json文件的globalStyle对象中开启enablePullDownRefresh属性

js
 "globalStyle": {
    "enablePullDownRefresh": true
  },
 "globalStyle": {
    "enablePullDownRefresh": true
  },

单个页面开启下拉刷新

pages.json文件中的pages数组中找到对应的页面,并在对应页面的style属性中开启enablePullDownRefresh

添加 onPullDownRefresh生命周期函数

或者在vue文件中添加 onPullDownRefresh生命周期函数,特定功能完成后,使用uni.stopPullDownRefresh(),来终止刷新,否则则一直刷新

滚动底部

页面触发

onReachBottom

scroll-view触发

https://uniapp.dcloud.net.cn/component/scroll-view.html#scroll-view

scroll-view滚动到底或右@scrolltolower方法

滚动顶部

onPageScroll监听页面滚动

uni.pageScrollTo设置滚动到的位置和动画时长

js
<script>
  export default {
    data() {
      return {
        showBackTop: false
    },
    onPageScroll(e) {
      this.showBackTop = e.scrollTop > 500 ? true : false;
    },
    methods: {
      scrollTop() {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 100
        })
      }
    }
  }
</script>
<script>
  export default {
    data() {
      return {
        showBackTop: false
    },
    onPageScroll(e) {
      this.showBackTop = e.scrollTop > 500 ? true : false;
    },
    methods: {
      scrollTop() {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 100
        })
      }
    }
  }
</script>

Released under the MIT License.