WeChat 미니 프로그램 기능 구현: 위로 밀어서 로드하고 아래로 당겨 새로 고침-미니 프로그램 개발-php.cn

WeChat 미니 프로그램 기능 구현: 위로 밀어서 로드하고 아래로 당겨 새로 고침

不言

풀어 주다： 2018-09-07 17:06:31

원래의

4544명이 탐색했습니다.

이 글의 내용은 위챗 애플릿 기능의 구현에 관한 것입니다. 위로 밀어서 로드하고 아래로 당겨서 새로 고치는 것이 좋습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 너.

앞서 말씀드렸던 글 목록의 데이터 로딩이 한꺼번에 로딩이 되어 불친절합니다. 이 장에서는 로드 및 새로 고침에 대해 소개합니다.

먼저 IDE에서 슬라이딩 업 작업을 시뮬레이션하는 방법을 소개하겠습니다. 처음에는 기사 목록을 마우스로 클릭하다가 위로 올라갔습니다. 결과가 없습니다. 코드에 문제가 있는 줄 알았습니다. 사실, 아니요. 마우스 휠을 사용하여 위로 밀고 아래로 당기기만 하면 됩니다.

먼저 슬라이드업과 풀다운 기능을 완성해 보겠습니다.

list.wxml 파일:

<view  class="page">
    <view class="page__bd">
        <!--用name 定义模版-->
        <template name="msgTemp">
            <!--
            1. scaleToFill : 图片全部填充显示，可能导致变形 默认
            2. aspectFit ： 图片全部显示，以最长边为准
            3. aspectFill ： 图片全部显示，以最短边为准
            4. widthFix ： 宽不变，全部显示图片
            -->
            <view  class="weui-panel__bd">
                <navigator url="../detail/detail?id={{id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                        <image class="weui-media-box__thumb" src="{{src}}" style="width: 60px; height: 60px;"/>
                    </view>
                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                        <view class="weui-media-box__title">{{title}}</view>
                        <view class="weui-media-box__desc">{{time}}</view>
                    </view>
                </navigator>
            </view>
        </template>
        
        <scroll-view scroll-top="{{scrollTop}}" style="height: {{windowHeight}}px; width: {{windowWidth}}px;" scroll-y="true" bindscrolltoupper="pullDownRefresh"  bindscroll="scroll" bindscrolltolower="pullUpLoad" class="weui-panel weui-panel_access">
            <view class="weui-panel__hd">文章列表</view>
                <view wx:for-items="{{msgList}}" wx:key="{{item.id}}">
                    <view class="kind-list__item">
                        <!--用is 使用模版-->
                        <template is="msgTemp" data="{{...item}}"/>
                    </view>
                </view>
        </scroll-view>
        <view>
            <loading hidden="{{hidden}}" bindchange="loadingChange">
            加载中...
            </loading>
        </view>
    </view>
    <view class="page__ft">
    </view>
</view>

로그인 후 복사

원본을 기반으로 추가 스크롤뷰를 사용하였습니다. 위의 기사 목록을 로드 중입니다.

첫 번째 단계: 세로 스크롤을 허용하도록 설정하려면 scroll-y = true,

# 🎜 🎜#

2단계: 고정 높이를 지정합니다. 이는 문서에서도 분명히 요구됩니다. 다음은 동적으로 획득한 휴대폰 구성의 높이와 너비입니다.

3단계: bindscrolltoupper(드롭다운) 및 bindscrolltolower(슬라이드업) 응답 방법을 설정합니다.

4단계: scroll-top(위치 지정용) 및 #🎜🎜 #bindscroll을 설정합니다. (스크롤 시 실행, 전자와 함께 사용하여 위치 지정 효과 달성)

5단계: 페이지 아이콘 설정을 로드하고 직접 복사하세요.

list.js 파일:

# 🎜🎜#

// pages/list/list.js
var app = getApp();

// 当前页数
var pageNum = 1;


// 加载数据
var loadMsgData = function(that){
  that.setData({
    hidden:false
  });
  var allMsg = that.data.msgList;
  app.ajax.req(&#39;/itdragon/findAll&#39;,{
    "page":pageNum , "pageSize" : 6
  },function(res){  
    // 不能直接 allMsg.push(res); 相当于list.push(list);打乱了结构
    for(var i = 0; i < res.length; i++){
      allMsg.push(res[i]);
    }
    that.setData({
      msgList:allMsg
    });
    pageNum ++;
    that.setData({
      hidden:true
    });
  });
}

Page({
  data:{
    msgList:[],
    hidden:true,
    scrollTop : 0,
    scrollHeight:0
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData( {
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    });
    loadMsgData(that);
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  // 下拉刷新数据
  pullDownRefresh: function() {
    var that = this;
    pageNum = 1;
    that.setData({
      msgList : [],
      scrollTop : 0
    });
    loadMsgData(that);
  },

  // 上拉加载数据 上拉动态效果不明显有待改善
  pullUpLoad: function() {
    var that = this;
    loadMsgData(that);
  },
  // 定位数据
  scroll:function(event){
    var that = this;
    that.setData({
      scrollTop : event.detail.scrollTop
    });
 },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

로그인 후 복사

첫 번째 포인트: app.ajax.req의 메서드를 이해하지 못하는 경우 다음을 참조하세요. : 위챗 미니 프로그램 요청 요청(해당 인터페이스 소스코드 포함)

두 번째 포인트: 페이징 쿼리이기 때문에 마지막 쿼리 내용을 저장해야 하므로 목록에 추가 .push는 연결하는 데 사용됩니다.

세 번째 사항: 각 쿼리 후에 페이지 번호를 1씩 늘려야 하며 로드 전에는 로드된 아이콘을 표시하고 로드 후에는 숨겨야 합니다.

네 번째 포인트: 설정 정보를 얻기 위한 페이지 로딩 초기화, 공식 문서: https://mp.weixin.qq.com/debug/wxadoc/dev/api / systeminfo.html#wxgetsysteminfoobject

다섯 번째 포인트: 드롭다운 논리, 페이지 번호를 1로 설정, msgList 콘텐츠 지우기, 위에서 0px 위치에 배치, 마지막으로 데이터 로드 메서드를 호출합니다.

6번째 포인트: 슬라이딩 업 로직을 직접 호출합니다. scorll 메소드에서 앵커 포인트에 값이 할당되었기 때문입니다.

7번째 포인트: 내 인터페이스를 호출하면 해당 appid를 사용할 수 없습니다. 프로젝트를 다시 만들고 appid 없음을 선택해야 합니다.

이렇게 하면 로딩과 새로고침이 완료됩니다. 비록 새로고침이 만족스럽지는 않지만, 인터넷에서 이런 예가 많이 발견되었습니다. 좋은 효과, 알려주세요.