search
HomeWeb Front-enduni-appHow to use scrpll-view component to implement pull-down refresh in uniapp

How to use the scrpll-view component to implement pull-down refresh in uniapp? The following article will introduce to you how to use scroll-view to customize pull-down refresh in uniapp. I hope it will be helpful to you!

How to use scrpll-view component to implement pull-down refresh in uniapp

uniapp pull-down refresh

There are two methods for pull-down refresh in uniapp, one is the overall pull-down refresh, Use the page life cycle function onPullDownRefresh; the other is local pull-down refresh, also called custom pull-down refresh, using the custom pull-down refresh event in the scrpll-view component.

1. Refresh the entire page (onPullDownRefresh)

Define the onPullDownRefresh processing function in js (and onLoad, etc. Lifecycle function sibling), listen to the user pull-down refresh event of the page. [Official Document]No more introduction here! Today’s focus is below

2. Customized page refresh (scroll-view)

Encountered in the component The problem

  • #cannot trigger the drop-down (cause troubleshooting)

    1. The scroll-view component is not wrapped with a view. Although the official website does not mention this problem, If there is no external view that wraps this component alone, there is no way to trigger events in the scroll-view component.

    2. The scroll-view does not have a fixed height. Set the height in CSS. The height will be displayed in the area. For example, if the height is set to 50vh (100vh is full screen), the content inside the component will be displayed. It will only scroll up and down in half the screen. It will not trigger the scroll bar of the page. It will only trigger the scroll bar of scroll-view. If it is difficult to determine the height, you can use scss(lang=' The calc calculation in scss') is reflected in the example. (Note that when using calc calculation, there must be spaces around -).

    3. If the high is set as a percentage, the drop-down cannot be triggered. You can use max-hight for high, but you cannot use min-hight.

    4. No scroll-y is set

  • Does not scroll to the top to trigger the drop-down, but triggers the drop-down in the visible page

    Official default no matter Wherever the scroll bar of the page is, as long as you scroll up or down on the scroll-view page, the drop-down function will be triggered, which makes the user experience very poor. You can use the @scroll function that is triggered when scrolling to obtain the scroll-view The position of the scroll bar, and then control refresher-enabled to turn on and off custom pull-down refresh. When the scroll bar of scroll-view scrolls to the top, enable refresher-enabled is true, and other conditions are false.

Go directly to the code to see: html:

<template>
<view>
  <scroll-view
    show-scrollbar="true"
    style="height: 300px"
    scroll-y="true"
    :refresher-enabled="isOpenRefresh"
    :refresher-triggered="triggered"
    :refresher-threshold="100"
    refresher-background="gray"
    @refresherpulling="onPulling"
    @refresherrefresh="onRefresh"
    @refresherrestore="onRestore"
    @refresherabort="onAbort"
    @scroll="onScroll"
  >
  <view v-if="!isOpenRefresh">别拉了,没有更多了~</view>
  <view class="item" v-for="(item, index) in dataList" :key="index">{{ item }}</view>
  </scroll-view>
</view>
</template>

Basically, these are the only attribute methods used for pull-down refresh! js:

export default {
  data() {
    return {
      triggered: false,
      dataList: [],
      arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
      page: 0,
      isOpenRefresh: true // 是否开启下拉
    };
  },
  onLoad() {
    this._freshing = false;
    this.getData()
  },
  methods: {
    dealArray(array, groupNum) {
      let temp = [];
      for (let i = 0, len = array.length; i < len; i += groupNum) {
        temp.push(array.slice(i, i + groupNum));
      }
      return temp;
    },
    // 自定义下拉刷新控件被下拉
    onPulling(e) {
      console.log("onpulling", e);
      if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
      this.triggered = true;
    },
    // 自定义下拉刷新被触发
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.page++;
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
        this.getData();
      }, 500);
    },
    // 自定义下拉刷新被复位
    onRestore() {
      this.triggered = &#39;restore&#39;; // 需要重置
      console.error("onRestore");
    },
    // 自定义下拉刷新被中止
    onAbort() {
      console.error("onAbort");
    },
    getData() {
      // 前端模拟分页
      let temp = this.dealArray(this.arr, 3) 
      if (this.page > temp.length - 1) {
        this.isOpenRefresh = false
        return 
      }
      this.dataList.push(...temp[this.page])
    }
  },
};

style:

<style>
view {
  text-align: center;
}
.item:nth-child(odd) {
  background-color: antiquewhite;
}
.item:nth-child(even) {
  background-color: aquamarine;
}
</style>

[Note] The scroll-view pull-down refresh will cause the page to slide up and trigger the pull-down. You can do this in @refresherpulling="onPulling"This method is as followsif (e.detail.deltaY // Prevent the page from sliding up and triggering the dropdown too

Demonstration:

How to use scrpll-view component to implement pull-down refresh in uniapp

appears. As long as you slide the page down anywhere on the page, the drop-down will be triggered. This type of problem occurs. You can use @scrolltoupper="scrolltoupper"Topping function, making an admission in it can solve the problem!

// 触顶操作-准入
scrolltoupper() {
    this.isAllowRefresh = true
}

// 自定义下拉刷新控件被下拉

onPulling(e) {
    if (e.detail.deltaY < 0) return
    if (!this.isAllowRefresh) return;
    this.isRefresh = true;
    console.log("onpulling", e);
}

You can also use @scroll="onScroll" to monitor the value of scroll-top and make it ===0 Triggered when , that is, reaching the top! Trigger again! But when he encounters it, he has to slide the page and the scroll bar will appear, and he will listen! We can initialize it during init so that its variables are initially 0!

export default class Index extends mixins(uiMixin) {
	scrollTop: number = 0
	// 监听页面是否滚动 
	onScroll(e) {  
      this.scrollTop = e.detail.scrollTop
	}
	// 自定义下拉刷新被触发
  onRefresh() {
	if (this.scrollTop === 0) {
		if (this._freshing) return;
        this._freshing = true;
        this.page++;
       	setTimeout(() => {
          this.triggered = false;
          this._freshing = false;
          this.getData();
       }, 500);
	}
  }
})

Recommended: "uniapp tutorial"

The above is the detailed content of How to use scrpll-view component to implement pull-down refresh in uniapp. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:掘金社区. If there is any infringement, please contact admin@php.cn delete
如何在uniapp中实现图片预览功能如何在uniapp中实现图片预览功能Jul 04, 2023 am 10:36 AM

如何在uni-app中实现图片预览功能引言:在移动应用开发中,图片预览是一项常用的功能。在uni-app中,我们可以通过使用uni-ui插件或自定义组件来实现图片预览功能。本文将介绍如何在uni-app中实现图片预览功能,并附带代码示例。一、使用uni-ui插件实现图片预览功能uni-ui是由DCloud开发的一套基于Vue.js的组件库,提供了丰富的UI组

如何在uniapp中实现相机拍照功能如何在uniapp中实现相机拍照功能Jul 04, 2023 am 09:40 AM

如何在uniapp中实现相机拍照功能现在的手机功能越来越强大,几乎每个手机都配备了高像素的相机。在UniApp中实现相机拍照功能,可以为你的应用程序增添更多的交互性和丰富性。本文将针对UniApp,介绍如何使用uni-app插件来实现相机拍照功能,并提供代码示例供参考。一、安装uni-app插件首先,我们需要安装一个uni-app的插件,该插件可以方便地在u

手把手教你uniapp和小程序分包(图文)手把手教你uniapp和小程序分包(图文)Jul 22, 2022 pm 04:55 PM

本篇文章给大家带来了关于uniapp跨域的相关知识,其中介绍了uniapp和小程序分包的相关问题,每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分,希望对大家有帮助。

uniapp中如何使用视频播放器组件uniapp中如何使用视频播放器组件Jul 04, 2023 am 10:13 AM

uniapp中如何使用视频播放器组件随着移动互联网的发展,视频已成为人们日常生活中不可或缺的娱乐方式之一。在uniapp中,我们可以通过使用视频播放器组件来实现视频的播放和控制。本文将介绍如何在uniapp中使用视频播放器组件,并提供相应的代码示例。一、引入视频播放器组件在uniapp中,我们需要先引入视频播放器组件才能使用它的功能。可以通过在页面的json

uniapp中如何使用地理位置获取功能uniapp中如何使用地理位置获取功能Jul 04, 2023 am 08:58 AM

uniapp是一种基于Vue.js的跨平台开发框架,它可以同时开发微信小程序、App和H5页面。在uniapp中,我们可以通过使用uni-api来访问设备的各种功能,包括地理位置获取功能。本文将介绍在uniapp中如何使用地理位置获取功能,并附上代码示例。首先,在uniapp中使用地理位置获取功能,我们需要在manifest.json文件中申请权限。在man

UniApp实现支付功能的接入与使用说明UniApp实现支付功能的接入与使用说明Jul 04, 2023 am 10:27 AM

UniApp实现支付功能的接入与使用说明随着移动支付的普及,很多应用都需要集成支付功能,以方便用户进行在线支付。UniApp作为一种基于Vue.js的跨平台开发框架,具有一次开发多平台使用的特点,可以轻松地实现支付功能的接入。本文将介绍UniApp中如何接入支付功能,并给出代码示例。一、支付功能的接入在App端的manifest.json文件中添加支付权限:

UniApp实现新闻资讯与热点推送的实现方法UniApp实现新闻资讯与热点推送的实现方法Jul 04, 2023 am 10:10 AM

UniApp实现新闻资讯与热点推送的实现方法随着移动互联网的快速发展,新闻资讯和热点推送成为了人们获取信息的重要途径。UniApp是一种基于Vue.js的跨平台开发框架,可以实现一次编写多端运行的效果。在UniApp中,我们可以利用其丰富的组件和插件生态来实现新闻资讯的展示和热点推送功能。一、新闻资讯展示创建页面首先,我们需要在UniApp中创建一个页面来展

UniApp实现性能监控与瓶颈分析的最佳实践UniApp实现性能监控与瓶颈分析的最佳实践Jul 04, 2023 am 08:46 AM

UniApp实现性能监控与瓶颈分析的最佳实践随着移动应用的快速发展,开发人员对应用性能的需求也日益增加。对于UniApp开发者来说,实现性能监控和瓶颈分析是非常重要的一项工作。本文将介绍UniApp中实现性能监控和瓶颈分析的最佳实践,并提供一些代码示例供参考。一、性能监控的重要性在现代移动应用中,用户体验是非常重要的。性能问题会导致应用加载速度慢、卡顿等问题

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools