WeChat アプレットのプルダウン ロードとプルアップ リフレッシュの実装の詳細な説明

韦小宝
リリース: 2023-03-21 12:48:02
オリジナル
10435 人が閲覧しました

この記事では、WeChat アプレットによるプルダウン ロードとプルアップ リフレッシュの実装について説明します。WeChat アプレットによるプルダウン ロードとプルアップ リフレッシュの実装について知らない場合、または興味がある場合に使用します。 WeChat アプレットによるプルダウン ロードとプルアップ リフレッシュの実装については、この記事を見てみましょう。早速、本題に入りましょう

WeChat ミニ プログラム プルの 2 つの実装方法。ダウンリフレッシュとプルアップロード

方法 1: ミニプログラムのプルダウンロードとプルアップによるリフレッシュを実装する onPullDownRefresh メソッドと onReachBottom メソッド

まず、json ファイルに window 属性を設定します

️説明 プルダウン更新を有効にするかどうかについては、ページ関連の
イベ​​ント処理関数を参照してください。 jsにonPullDownRefreshとonReachBottomメソッドを設定します
Attributes Type onPullDownRefresh
関数

ページ関連のイベント処理関数- ユーザーのプルダウン アクションを監視します
onReachBottom function ページのプルアップによってトリガーされるボトム イベントの処理関数

プルダウンの読み込み手順:

データ更新の処理後、wx.stopPullDownRefresh は現在のページのプルダウン更新を停止できます。

onPullDownRefresh(){
  console.log('--------下拉刷新-------')
  wx.showNavigationBarLoading() //在标题栏中显示加载
 
  wx.request({
          url: 'https://URL',
          data: {},
          method: 'GET',
         // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
          // header: {}, // 设置请求的 header
          success: function(res){
            // success
          },
          fail: function() {
            // fail
          },
          complete: function() {
            // complete
            wx.hideNavigationBarLoading() //完成停止加载
            wx.stopPullDownRefresh() //停止下拉刷新
          }
    })
ログイン後にコピー

方法2:

スクロールビューでbindscrolltoupperとbinscrollto lowerを設定してWeChatアプレットドロップダウンを実装する

EventHandlescrolltoupperイベントがトリガーされますEventHandleは下のイベントへのスクロールをトリガーしますindex.js
プロパティ bindscrolltoupper
bindsrollto lower
一番下までスクロール/そうです、

index.wxml
ログイン後にコピー
rree

<!--index.wxml-->
<view class="container" style="padding:0rpx">
  <!--垂直滚动,这里必须设置高度-->
    <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" 
        class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad"  bindscroll="scroll">
        <view class="item" wx:for="{{list}}">
            <image class="img" src="{{item.pic_url}}"></image>
            <view class="text">
                <text class="title">{{item.name}}</text>
                <text class="description">{{item.short_description}}</text>
            </view>
        </view>
    </scroll-view>
    <view class="body-view">
        <loading hidden="{{hidden}}" bindchange="loadingChange">
            加载中...
        </loading>
    </view>
</view>
ログイン後にコピー
index.wxss


var url = "http://www.imooc.com/course/ajaxlist";
var page =0;
var page_size = 5;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;


// 请求数据
var loadMore = function(that){
    that.setData({
        hidden:false
    });
    wx.request({
        url:url,
        data:{
            page : page,
            page_size : page_size,
            sort : sort,
            is_easy : is_easy,
            lange_id : lange_id,
            pos_id : pos_id,
            unlearn : unlearn
        },
        success:function(res){
            //console.info(that.data.list);
            var list = that.data.list;
            for(var i = 0; i < res.data.list.length; i++){
                list.push(res.data.list[i]);
            }
            that.setData({
                list : list
            });
            page ++;
            that.setData({
                hidden:true
            });
        }
    });
}
Page({
  data:{
    hidden:true,
    list:[],
    scrollTop : 0,
    scrollHeight:0
  },
  onLoad:function(){
    //   这里要注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值
      var that = this;
      wx.getSystemInfo({
          success:function(res){
              that.setData({
                  scrollHeight:res.windowHeight
              });
          }
      });
       loadMore(that);
  },
  //页面滑动到底部
  bindDownLoad:function(){   
      var that = this;
      loadMore(that);
      console.log("lower");
  },
  scroll:function(event){
    //该方法绑定了页面滚动时的事件,我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
     this.setData({
         scrollTop : event.detail.scrollTop
     });
  },
  topLoad:function(event){
    //   该方法绑定了页面滑动到顶部的事件,然后做上拉刷新
      page = 0;
      this.setData({
          list : [],
          scrollTop : 0
      });
      loadMore(this);
      console.log("lower");
  }
})
ログイン後にコピー

この記事はここまでですすべてを理解できない場合は内容は両面を理解すれば一人でも簡単にマスターできます!


関連する推奨事項:



指ズーム画像のコード共有を実現する WeChat アプレット

以上がWeChat アプレットのプルダウン ロードとプルアップ リフレッシュの実装の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート