WeChat Applet
Mini Program Development
WeChat applet example code: more implementation methods for pull-up loading
WeChat applet example code: more implementation methods for pull-up loading
The content of this article is about the WeChat applet example code: more implementation methods for pull-up loading. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. Code environment
I used the scroll-view component at the beginning, but when I used it on a real machine, I found that when more pull-ups were loaded, the data jumped, which affected user interaction and its Not friendly, so I decided to modify the pull-up to load more effects
I use the wepy framework, refer to multiple online documents, and also refer to the official documents. The main use is the onReachBottom() event
2. Code
View layer:
<repeat for="{{recordList}}" key="index" index="index" item="item" >
<view class="zan-panel">
<view class="zan-cell">
<view class="zan-cell__bd">变更内容：{{item.typeText}}</view>
<view class="zan-cell__ft">￥<text style="padding-left:4rpx">{{item.totalFee/100}}</text></view>
</view>
<view class="zan-cell">
<view class="zan-cell__bd zan-font-12 zan-c-gray-dark">变更时间：{{item.updateTime}}</view>
</view>
</view>
</repeat>
<block wx:if="{{recordList.length > pageSize}}">
<block wx:if="{{updateLoadShow}}">
<updateLoad :loading="updateLoadShow"></updateLoad>
</block>
<view class="doc-description zan-center" style="font-size:12px;" wx:else>
<text>{{updateLoadTxt}}</text>
</view>
</block>Description: If the data does not exceed one screen, pulling it up cannot trigger onReachBottom( ) event, so the processing I did was "(current screen height / actual height of a list loop) 1" to ensure that the data can exceed one screen.
onLoad() {
// 获取系统消息
wepy.getSystemInfo({
success: (res) => {
this.height = res.windowHeight
this.pageSize = Math.round(res.windowHeight / 103) + 1
this.$apply()
}
})
}Logical layer writing:
// 上拉加载
onReachBottom() {
// 上拉加载更多loading
this.updateLoadShow = true
let _length = this.recordList.length
// 列表长度与列表总数对比
if (_length === this.pagtotal) {
setTimeout(() => {
this.updateLoadShow = false
this.$apply()
}, 1000)
} else {
// 当前页码加一
this.pageNum++
// 更新数据
this.getData()
}
}
// 获取数据
getData() {
const pageNum = this.pageNum
api.get(recordURL + 'queryBalanceSub?start=' + pageNum + '&size=' + this.pageSize + '&sortStr=update_time&sortType=desc').then(({data}) => {
if (pageNum === 1) {
this.recordList = data.list
this.pagtotal = data.totalRow
} else {
this.recordList = this.recordList.concat(data.list)
}
this.loadingShow = false
this.updateLoadShow = false
this.$apply()
})
}Related recommendations:
WeChat applet example: four page jump methods (with code)
WeChat Mini Program Example: Implementation Code of Pop-up Window in WeChat Mini Program
The above is the detailed content of WeChat applet example code: more implementation methods for pull-up loading. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Develop WeChat applet using Python
Jun 17, 2023 pm 06:34 PM
With the popularity of mobile Internet technology and smartphones, WeChat has become an indispensable application in people's lives. WeChat mini programs allow people to directly use mini programs to solve some simple needs without downloading and installing applications. This article will introduce how to use Python to develop WeChat applet. 1. Preparation Before using Python to develop WeChat applet, you need to install the relevant Python library. It is recommended to use the two libraries wxpy and itchat here. wxpy is a WeChat machine
Can small programs use react?
Dec 29, 2022 am 11:06 AM
Mini programs can use react. How to use it: 1. Implement a renderer based on "react-reconciler" and generate a DSL; 2. Create a mini program component to parse and render DSL; 3. Install npm and execute the developer Build npm in the tool; 4. Introduce the package into your own page, and then use the API to complete the development.
How to use Vue to implement pull-down refresh and pull-up loading?
Jun 25, 2023 pm 06:52 PM
With the popularity of mobile Internet, pull-down to refresh and pull-up to load have become one of the standard features of modern apps and websites. These two interaction methods can greatly improve user experience and page performance. Under the Vue framework, we can use some plug-ins or write code ourselves to achieve these two interaction methods. Implementation of pull-down refresh Pull-down refresh refers to the operation in which the user triggers data refresh by pulling down the page. In Vue, we can implement pull-down refresh through all Vue options and APIs, and the fastest and most efficient
Implement card flipping effects in WeChat mini programs
Nov 21, 2023 am 10:55 AM
Implementing card flipping effects in WeChat mini programs In WeChat mini programs, implementing card flipping effects is a common animation effect that can improve user experience and the attractiveness of interface interactions. The following will introduce in detail how to implement the special effect of card flipping in the WeChat applet and provide relevant code examples. First, you need to define two card elements in the page layout file of the mini program, one for displaying the front content and one for displaying the back content. The specific sample code is as follows: <!--index.wxml-->&l
How to implement pull-down to refresh and pull-up to load more in uniapp
Oct 25, 2023 am 08:48 AM
Title: Tips and examples for implementing pull-down refresh and pull-up loading in uniapp Introduction: In mobile application development, pull-down refresh and pull-up loading are common functional requirements, which can improve user experience and provide smoother interaction. This article will introduce in detail how to implement these two functions in uniapp, and give specific code examples to help developers quickly master the implementation skills. 1. Implementation of pull-down refresh Pull-down refresh means that after the user slides down a certain distance from the top of the page, an action is triggered to refresh the page data. at uniapp
Alipay launched the 'Chinese Character Picking-Rare Characters' mini program to collect and supplement the rare character library
Oct 31, 2023 pm 09:25 PM
According to news from this site on October 31, on May 27 this year, Ant Group announced the launch of the "Chinese Character Picking Project", and recently ushered in new progress: Alipay launched the "Chinese Character Picking-Uncommon Characters" mini program to collect collections from the society Rare characters supplement the rare character library and provide different input experiences for rare characters to help improve the rare character input method in Alipay. Currently, users can enter the "Uncommon Characters" applet by searching for keywords such as "Chinese character pick-up" and "rare characters". In the mini program, users can submit pictures of rare characters that have not been recognized and entered by the system. After confirmation, Alipay engineers will make additional entries into the font library. This website noticed that users can also experience the latest word-splitting input method in the mini program. This input method is designed for rare words with unclear pronunciation. User dismantling
How uniapp achieves rapid conversion between mini programs and H5
Oct 20, 2023 pm 02:12 PM
How uniapp can achieve rapid conversion between mini programs and H5 requires specific code examples. In recent years, with the development of the mobile Internet and the popularity of smartphones, mini programs and H5 have become indispensable application forms. As a cross-platform development framework, uniapp can quickly realize the conversion between small programs and H5 based on a set of codes, greatly improving development efficiency. This article will introduce how uniapp can achieve rapid conversion between mini programs and H5, and give specific code examples. 1. Introduction to uniapp unia
Tutorial on writing a simple chat program in Python
May 08, 2023 pm 06:37 PM
Implementation idea: Establishing the server side of thread, so as to process the various functions of the chat room. The establishment of the x02 client is much simpler than the server. The function of the client is only to send and receive messages, and to enter specific characters according to specific rules. To achieve the use of different functions, therefore, on the client side, you only need to use two threads, one is dedicated to receiving messages, and the other is dedicated to sending messages. As for why not use one, that is because, only
