PHP前端开发

uniapp中怎么使用scrpll-view组件实现下拉刷新

百变鹏仔 4周前 (11-20) #uniapp
文章标签 组件

uniapp中怎么使用scrpll-view组件实现下拉刷新?下面本篇文章给大家介绍一下uniapp使用scroll-view自定义下拉刷新的方法,希望对大家有所帮助!

uniapp下拉刷新

uniapp的下拉刷新有两个方法, 一种是整体的下拉刷新, 使用页面生命周期函数onPullDownRefresh; 另外一种是局部的下拉刷新也叫自定义下拉刷新, 使用scrpll-view组件中的自定义下拉刷新事件。

一.整个页面的刷新(onPullDownRefresh)

在 js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。【官方文档】这里不再做过多介绍!今天的重点在下面

二.自定义页面刷新(scroll-view)

组件中遇到的问题

直接上代码看:html:

<template><view>  <scroll-view>  <view>别拉了,没有更多了~</view>  <view>{{ item }}</view>  </scroll-view></view></template>

基本上下拉刷新用到的属性方法也就这几个了!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  {        this.triggered = false;        this._freshing = false;        this.getData();      }, 500);    },    // 自定义下拉刷新被复位    onRestore() {      this.triggered = 'restore'; // 需要重置      console.error("onRestore");    },    // 自定义下拉刷新被中止    onAbort() {      console.error("onAbort");    },    getData() {      // 前端模拟分页      let temp = this.dealArray(this.arr, 3)       if (this.page &gt; 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>

【注意】scroll-view 下拉刷新会出现上滑页面也触发下拉,可以在 @refresherpulling="onPulling"这个方法,如下 if (e.detail.deltaY

演示:

出现,在页面上任意位置只要下滑动页面就会触发下拉,这类问题。可以使用@scrolltoupper="scrolltoupper"触顶函数,在这里面做一个准入可以解决!

// 触顶操作-准入scrolltoupper() {    this.isAllowRefresh = true}// 自定义下拉刷新控件被下拉onPulling(e) {    if (e.detail.deltaY <blockquote><p>也可以使用@scroll="onScroll"监听 scroll-top的值,让其 ===0时触发,也就是到达顶部!再触发!但是遇到其必须滑动一下页面出现滚动条,他才会监听!我们可以init的时候初始化一下,令其变量初始为0!</p></blockquote><pre class="brush:html;toolbar:false;">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(() =&gt; {          this.triggered = false;          this._freshing = false;          this.getData();       }, 500);}  }})

推荐:《uniapp教程》