Home > Article > WeChat Applet > Drop-down refresh problem of mini program
In the mini program, the onLoad life hook is only called once when the page is created. After doing the navigateTo page jump, return to the upper-level page. Since the navigateTo jump only hides the current page, the onLoad life hook is called when returning to the upper-level page. It will not be executed again. The advantage of this is that the page can be displayed quickly, but the request data in onLoad will not be updated in real time. At this time, a pull-down refresh operation is needed to help manually update the page data. Next, this article We will introduce three ways to implement pull-down refresh in the mini program
enablePullDownRefresh is the easiest way to implement pull-down refresh. In the json file, set enablePullDownRefresh to true, just listen to the onPullDownRefresh event in the Page. It supports clicking the top title bar to return to the top. It will be invalid when customizing the title bar. You can also trigger the pull-down refresh event by directly calling wx.startPullDownRefresh() to generate a pull-down refresh animation. After processing After the data in pull-down refresh is updated, call wx.stopPullDownRefresh() to end the animation.
The advantage of this form of pull-down refresh is obviously that it is simple and has no restrictions, but the disadvantages are also obvious:
scroll-view is an official scroll view component. It is very simple to use. If you want to set up the pull-up refresh code, the code is as follows:
<scroll-view> <view>content</view> </scroll-view>
If you want to use scroll- To implement pull-up refresh of the view, please note:
scroll-view Disadvantages:
scroll-view advantages:
Compared with enablePullDownRefresh, scroll-view is more convenient for scrolling list control:
Officially does not recommend using scroll-view for drop-down Refresh, there is such a tip in the official documentation
wxml:
<view> <view> <view></view> <text>{{state === 0 ? '下拉刷新' : state === 1? '松开刷新' : '刷新中'}}</text> </view> <view> <slot></slot> </view> </view>This file defines the template of the component. There is a scroll view package, which is bound to the touch event, which contains the animation during pull-down refresh, and a slot, slot Used to insert the content of the scrolling list
wxss:
.animation { display: flex; justify-content: center; align-items: center; width: 100%; height: 150rpx; margin-bottom: -150rpx; background-color: #fff; } .loading { width: 30rpx; height: 30rpx; border:6rpx solid #333333; border-bottom: #cccccc 6rpx solid; border-radius: 50%; animation:load 1.1s infinite linear; } @keyframes load{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } .tip { margin-left: 10rpx; color: #666; }Style file This is nothing special
js:
let lastY = 0 // 上一次滚动的位置 let scale = 750 / wx.getSystemInfoSync().windowWidth // rpx转化比例 Component({ options: { multipleSlots: true }, data: { scrollTop: 0, translateHeight: 0, // 平移距离 state: -1 }, properties: { // 触发下拉刷新的距离 upperDistance: { type: Number, value: 150 } }, methods: { // 监听滚动,获取scrollTop onPageScroll (e) { this.data.scrollTop = e.scrollTop }, touchStart (e) { lastY = e.touches[0].clientY }, touchMove (e) { let clientY = e.touches[0].clientY let offset = clientY - lastY if (this.data.scrollTop > 0 || offset this.data.upperDistance) { this.data.state = 1 } this.setData({ translateHeight: this.data.translateHeight, state: this.data.state }) }, touchEnd (e) { if (this.data.translateHeight - this.data.scrollTop * scale > this.data.upperDistance) { this.setData({ translateHeight: 150 }) this.triggerEvent('scrolltoupper') this.setData({ state: 2 }) } else if (this.data.scrollTop { wx.pageScrollTo({ scrollTop: 0, duration: 0 }) }) } } })The most important thing about this pull-down refresh component is to control the timing of pull-down refresh , the code is embodied by defining an upperDistance, and the pull-down refresh distance is used to determine whether to perform refresh. When the finger slides, the sliding distance is obtained, and the translateHeight is accumulated for display. In the touchEnd event, it is judged whether the sliding distance reaches the set value. When the set value is reached, the scrolltoupper event is sent and can be monitored in the parent component. Otherwise, the refresh is stopped.
<header></header> <refresh-scroll> <view>{{item}}</view> </refresh-scroll>
Page({ data: { list: [] }, onLoad: function () { this.refreshScroll = this.selectComponent('#refreshScroll') for (let i = 0; i { wx.hideLoading() }, 1000) }, refresh: function (e) { setTimeout(() => { this.refreshScroll.stopRefresh() }, 1000) } })
iOS:
Android:
When tested on a real machine, the performance was pretty good. Of course, this is just a simple component example of custom pull-down refresh. If it needs to be used in actual projects , you may still need to improve it yourself. After all, different people have different application scenarios. Here is just an idea.
This article introduces the small There are three ways to pull down and refresh the program. The first two are officially provided by the mini program. The last one is a personal summary of thoughts. It is also relatively simple to write. If you want to apply it in the project, you still need to improve it yourself. I just hope it can be done for everyone. Customizing drop-down refresh provides an idea.
Recommended tutorial: "WeChat Mini Program"
The above is the detailed content of Drop-down refresh problem of mini program. For more information, please follow other related articles on the PHP Chinese website!