微信小程序下拉刷新和上拉加载的两种实现方法

微信小程序下拉刷新和上拉加载的两种实现方法

    微信小程序下拉刷新和上拉加载的两种实现方法:1.使用“ onPullDownRefresh”和“ onReachBottom”方法实现小程序的下拉刷新上拉加载; 2.将scrollscview设置为bindscrolltoupper和bindscrolltolower 实施微信小程序下拉刷新并加载。


    利用"onPullDownRefresh"和"onReachBottom"方法

    在js文件里直接写"onPullDownRefresh"和"onReachBottom"方法即可;


xml


<scroll-view scroll-y = true >

    .........

</scroll-view>

js


onPullDownRefresh: function() {

    // Do something when pull down.

     console.log('刷新');

 },


 onReachBottom: function() {

    // Do something when page reach bottom.

     console.log('circle 下一页');

 },

 在scroll-view里设定bindscrolltoupper和bindscrolltolower

在scroll-view里设定bindscrolltoupper和bindscrolltolower,然后在js里写好触发事件后对应的方法。[注意,使用这个模式一定要设置scroll-view的高度,100%不知道为什么设置后没效果,建议使用100vh]


xml


 <scroll-view scroll-y = true bindscrolltolower="loadMore" bindscrolltoupper="refesh">

    ..........

</scroll-view>

js


onPullDownRefresh: function() {

    // Do something when pull down.

     console.log('刷新');

 },


 onReachBottom: function() {

    // Do something when page reach bottom.

     console.log('circle 下一页');

 },

对我有帮助
34人认为有帮助

相关帮助