index.wxss
/**
*/page(,
/*** 生命週期函式--監聽頁面載入
*/onload() ,
/*** 頁面相關事件處理函式--監聽使用者下拉動作
*/onpulldownrefresh() );
this.setdata();
this.loaddata();
},/**
* 頁面上拉觸底事件的處理函式
*/onreachbottom() );
this.loaddata();}},
/*** 請求資料封裝
*/loaddata: function () ,
success: function (res) );
} else );
}// 停止載入中動畫
wx.hideloading();
// 停止下拉重新整理
wx.stoppulldownrefresh();
},});
},});
}}}
正在載入中...
page
.article
.article .article_box
.article_box .list
.article_box .list:last-child
.article_box .list .img
.article_box .list .img image
.article_box .list .text .title
.article_box .list .text .author
.article_box .list .text .desc
/* 載入中動畫 */
.loadmore
.loadmore.loading::before
@keyframes loading
to }
微信小程式下拉重新整理和上拉載入更多
因為專案裡面，經常會用到此功能，所以我們封裝乙個外掛程式。裡面應用到vant的元件 1.在compontent裡面建立乙個檔案，名字隨意 布局檔案 message scroll view client pool list scroll y lower threshold 1 bindtouchsta...
微信小程式開發之 下拉重新整理，上拉載入更多
先開看一下介面 1.wx.request 獲取遠端伺服器的資料，可以理解成 ajax 2.scroll view的兩個事件 2.1 bindscrolltolower 滑到頁面底部時 2.2 bindscroll 頁面滑動時 2.3 bindscrolltoupper 滑倒頁面頂部時 然後我們看 詳...
微信小程式開發之 下拉重新整理，上拉載入更多
先開看一下介面 1.wx.request 獲取遠端伺服器的資料，可以理解成 ajax 2.scroll view的兩個事件 2.1 bindscrolltolower 滑到頁面底部時 2.2 bindscroll 頁面滑動時 2.3 bindscrolltoupper 滑倒頁面頂部時 然後我們看 詳...