위 챗 애플 릿 목록 - 드 롭 다운 새로 고침, 드 롭 다운, 복귀

글 은 단지 자신 이 코드 를 쓰 는 과정 에서 총 결 된 것 이다.본인 도 초보 소 백 입 니 다. 더 우아 한 방법 으로 글 을 쓰 면 댓 글 을 환영 합 니 다.붙 인 코드 는 모두 시험 을 거 친 것 이다.
위 챗 애플 릿 은 페이지 방법 을 사용 하여 목록 을 아래로 끌 어 올 리 고 새로 고침 하 며 위로 끌 어 올 리 는 기능 을 할 수 있 습 니 다.목록 기능 을 실현 할 수도 있다.
1. 드 롭 다운 리 셋 과 드 롭 다운 로드 (Page 자체 의 방법 으로 이 루어 집 니 다. 아 닙 니 다)
1. page 의 json 을 설정 하고 enablePull DownlRefresh 를 true 로 설정 하여 드 롭 다운 새로 고침 을 엽 니 다.onReachBottomDistance 의 값 을 설정 하고 로드 를 엽 니 다.
PS: enablePull DownlRefresh 도 app. json 에서 전역 설정 을 할 수 있 습 니 다.그러나 전역 설정 은 드 롭 다운 기능 이 필요 없 는 페이지 를 드 롭 다운 도 가능 하 게 합 니 다.개인 적 으로 전역 설정 을 추천 하지 않 습 니 다. 드 롭 다운 작업 이 필요 한 페이지 의 json 에 따로 가입 하면 됩 니 다.

// pages/reserve/reserve.json
{
  "navigationBarTitleText": "    ",
  "enablePullDownRefresh": true,  //      
  "backgroundTextStyle":"dark",//         ，  app.json   
  "onReachBottomDistance": 50//          
}

2. 대응 페이지 의 js 에 방법 을 추가 합 니 다. onPull DownlRefresh 드 롭 다운 새로 고침 방법, onReachBottom 에서 로드 하 는 방법 은 page 에서 자체 적 으로 가 져 온 것 입 니 다.문서 위치: 프레임 워 크 -- 등록 페이지 -- 페이지

// pages/reserve/reserve.js         ，      ，          ，          

Page({
  data: {
    username: '',
    password: '',
    page:1,
    hasMoreData: true,//        
    hasFail: false,//          
    list: []
  },
  onLoad: function (options) {
    //           
    this.setData({
      username: options.username,
      password: options.password
    });
    this.getList();  //         
  },
  onPullDownRefresh: function () {
    //    ，            ，       ，   page  1，            
    this.setData({ hasMoreData: true, page: 1 }, () => this.getList());
  },
  onReachBottom: function () {
    //    ，        ，      ，           ，           
    this.data.hasMoreData ? this.getList() : null;
  },
  //      
  getList: function () {
    let _this = this;
    //     ，    
    wx.showLoading({
      title:"     ...",
      mask:true
    });
    //        
    wx.request({
      url: config.url.serviceUrl + 'sfbapi/kefuQueryWX',
      data: {
        action: 'List',
        u: this.data.username,
        p: this.data.password,
        page: this.data.page, //  
        pageSize: 20 //     
      },
      header: {
        'content-type': 'application/json' //    
      },
      success: function (ret) {
        //          ，      ，      ，         ，            
        let listData = _this.data.page == 1 ? [] : _this.data.list;  
        //        ，          （    ）
        wx.stopPullDownRefresh();
        //    ，                
        _this.setData({
          list: listData.concat(ret.data.list),
          hasFail: false
        });
        //        0   20（20          ），          
        if (ret.data.list.length == 0 || ret.data.list.length < 20) {
          _this.setData({ hasMoreData: false });
        } else {
          //        ，    1
          _this.setData({
            hasMoreData: true,
            page: ++_this.data.page
          })
        };
      },
      fail: function () {
        _this.setData({
          hasFail: true
        });
      },
      complete:function(){
        wx.hideLoading();
      }
    })
  }
)}

2. API 의 wx. pagesrollto 를 통 해 끝 을 되 돌려 줍 니 다.
PS: 저 는 끝 에 있 는 wxml 를 템 플 릿 으로 썼 습 니 다. 다음 끝 에 있 는 코드 를 util. js 에 넣 어서 재 활용 하기에 편리 합 니 다.

goTop: function () {
 if (wx.pageScrollTo) { //       0（      ）
    wx.pageScrollTo({
      scrollTop: 0 //       0
    })
  } else { //          
    wx.showModal({
      title: '  ',
      content: '        ，       ，             。'
    })
  }
}