미니 프로그램에서 풀다운 새로 고침 및 풀업 로딩 기능을 구현하는 방법에 대해 간략하게 설명합니까? (코드 포함)

이 글에서는 미니 프로그램에서 풀다운 새로고침과 풀업 로딩 기능을 구현하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

목록 데이터를 표시할 때 데이터가 많거나 빠르게 업데이트되는 경우 풀업 새로 고침 및 풀다운 로딩 기능을 제공하여 사용자 경험을 향상시켜야 합니다. [관련 학습 추천 : 미니 프로그램 개발 튜토리얼]

풀다운 새로 고침 및 풀업 로딩 wxml 파일 작성

스크롤 뷰 슬라이딩 컴포넌트를 사용하여 목록을 표시할 때 풀다운이 있습니다. 새로고침 및 풀업 로딩 자체 트리거 기능

<scroll-view class="scroll" scroll-y="{{true}}" upper-threshold="50"   
bindscrolltoupper="refresh"  style="height:700px">
  <l-loadmore show="{{upfresh}}" bindscrolltolower="getMore"  type="loading" loading-text="拼命刷新中">
</l-loadmore>

<l-loadmore show="{{downfresh}}" type="loading" loading-text="拼命加载中">
</l-loadmore>

• scroll-y: 수직 스크롤 허용 여부, 기본값은 false, 여기서는 true로 설정합니다.
• upper-threshold: 상단/왼쪽에서 얼마나 멀리 떨어져 있는지 scrolltoupper 이벤트를 트리거합니다(새로 고침하려면 아래로 당김)
• bindscrolltoupper: 스크롤 위쪽/왼쪽으로 스크롤할 때 트리거됩니다. 여기서 위쪽으로 스크롤할 때 트리거되어야 하는 기능을 설정합니다.
• bindscrolltolower: 위쪽/오른쪽으로 스크롤할 때 트리거됩니다.

line-ui 프레임워크 소개

여기에서는 풀다운 새로 고침과 풀업을 사용합니다. 로딩 표시 구성 요소는 lin-ui 프레임워크에서 제공됩니다. 여기서는 lin을 소개하는 방법에 대해 설명하겠습니다. -ui 프레임워크:

lin-ui 공식 문서 주소

//在小程序项目目录中执行下面的函数
npm install lin-ui

그런 다음 컴포넌트를 도입해야 하는 페이지의 json 파일에 도입하세요

"usingComponents": {
    "l-loadmore":"/miniprogram_npm/lin-ui/loadmore/index",
    "l-loading":"/miniprogram_npm/lin-ui/loading/index",
  },

이렇게 하면 lin-ui 컴포넌트가 성공적으로 도입되었습니다.

js 코드 작성

data: {
    downfresh:false,//底部加载展示控制
    upfresh:false//顶部加载展示控制
  },

먼저 로딩 컴포넌트를 데이터에 표시할지 설정하세요. 기본적으로는 표시되지 않습니다.

JS 코드를 새로 고치려면 아래로 당겨

//下拉刷新
refresh(){
    if(this.data.upfresh){
      console.log("还没刷新完成")
      return;
    }
    var that = this;
    this.setData({
      upfresh: true,
      // upfresh:false
    })
   
    setTimeout(function() {
      //updateData为自己的数据更新逻辑代码
      that.updateData(true,()=>{
        that.setData({
          upfresh: false,
      });
     })
      // wx.hideLoading();
    console.info('下拉刷新加载完成.');
  }, 500);
  },
    
      //更新数据
   updateData:function(tail, callback) {
  
    var that = this;
    console.log("updatedata-=-=seea"+that.data.searchValue)
    wx.request({
      url: app.gBaseUrl + 'compony-detail/page',
      method: 'GET',
      data: {
        page: 0,
        count: 20,
        componyname:that.data.searchValue
      },
      success: (res) => {
        this.setData({
          componys: res.data
        })
        if (callback) {
          callback();
        }
      }
    })
   },

위로 당겨주세요. Loading js code

 /**
   * 滑动到底部加载更多
   */
  getMore(){
    // downloadingData=this.data.downloadingData
    if(this.data.downfresh){
      console.log("还没加载完成")
      return;
    }
   var that = this;
    this.setData({
      downfresh: true,
      // upfresh:false
    })
   
    this.setData({
      downloadingData: true
      // upfresh:false
    })

    setTimeout(function() {
      that.loadData(true,()=>{
        that.setData({
        downfresh: false
      });
     })
      // wx.hideLoading();
    console.info('上拉数据加载完成.');
  }, 1000);
  },
    
      loadData: function(tail, callback) {
    var that = this;
    wx.request({
      url: app.gBaseUrl + 'compony-detail/page',
      method: 'GET',
      data: {
        page: that.data.componys.length,
        count: 20,
        componyname:that.data.searchValue
      },
      success: (res) => {
        // console.log(JSON.stringify(res.data))
        that.setData({
          componys: that.data.componys.concat(res.data),
        });
        if (callback) {
          callback();
        }
      }
    })
  },

전체 풀다운 새로 고침 및 풀업 로딩 기능을 주로 구현하여 트리거 시간에 따라 녹음 구성 요소의 표시 및 숨김을 제어하기 위해 주로 스크롤 보기의 구성 요소를 사용합니다. 전체적인 구현은 그다지 어렵지 않으며, 특정 코드는 실제 상황에 따라 적절하게 조정할 수 있습니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 미니 프로그램에서 풀다운 새로 고침 및 풀업 로딩 기능을 구현하는 방법에 대해 간략하게 설명합니까? (코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!