この記事では、WeChat アプレットによるプルダウン ロードとプルアップ リフレッシュの実装について説明します。WeChat アプレットによるプルダウン ロードとプルアップ リフレッシュの実装について知らない場合、または興味がある場合に使用します。 WeChat アプレットによるプルダウン ロードとプルアップ リフレッシュの実装については、この記事を見てみましょう。早速、本題に入りましょう
方法 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アプレットドロップダウンを実装する
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 アプレットのプルダウン ロードとプルアップ リフレッシュの実装の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。