WeChat ミニプログラム機能の実装: 上にスライドしてロードし、プルダウンして更新します

この記事の内容は WeChat アプレット機能の実装に関するものです。上にスライドしてロードし、下にスライドして更新します。必要な友人は参考にしていただければ幸いです。

前述の通り、記事一覧のデータ読み込みは一括読み込みなので不親切です。この章では、ロードとリフレッシュについて説明します。

まず、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>

本来のベースでは、追加のスクロールビューが使用されます (公式ドキュメント: https://mp.weixin.qq.com/debug/wxadoc/ dev/component/scroll-view.html) 上記の記事リストをロードしています。

最初のステップ: 垂直方向にスクロールできるようにするために、scroll-y = true を設定します。

第 2 ステップ: 固定の高さを指定します。これもドキュメント内で明らかに必要です。 。以下は、動的に取得された携帯電話構成の高さと幅です。

ステップ 3: bindscrolltoupper (プルダウン) および bindscrollto lower (スライドアップ) 応答メソッドを設定します。

ステップ 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('/itdragon/findAll',{
    "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 のメソッドが理解できない場合は、次を参照してください: WeChat アプレット リクエストrequest (対応するインターフェースのソースコードが利用可能です)

2 番目のポイント: ページング クエリであるため、最後のクエリの内容を保存する必要があるため、list.push を使用して結合します。

3 番目のポイント: 各クエリの後、ページ番号を 1 ずつ増やす必要があり、ロードされたアイコンはロード前に表示され、ロード後に非表示になる必要があります。

ポイント4: 設定情報を取得するためのページ読み込み初期化、公式ドキュメント: https://mp.weixin.qq.com/debug/wxadoc/dev/api/systeminfo.html#wxgetsysteminfoobject

ポイント5:ドロップダウンのロジックでは、ページ番号を 1 に設定し、msgList コンテンツをクリアして、上から 0px の位置に配置し、最後にデータをロードするメソッドを呼び出します。

ポイント6: スライドアップのロジックを直接呼び出すことができます。アンカーポイントには scorll メソッドで値が割り当てられているためです。

ポイント 7: 私のインターフェースを呼び出す場合、appid は使用できません。新しいプロジェクトを作成し、appid を選択しない必要があります。

このようにして、ロードとリフレッシュが完了しました。リフレッシュには満足していませんが、このような例がネット上にたくさんあります。良い効果がある場合は、ご教示ください。

関連する推奨事項:

WeChatミニプログラムでのプルダウンリフレッシュとプルアップロードの実装方法の詳細な説明

WeChat アプレットはプルダウン読み込みとプルアップ更新を詳細に実装します

以上がWeChat ミニプログラム機能の実装: 上にスライドしてロードし、プルダウンして更新しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。