WeChat applet development list pull-up load pull-down refresh sample code

This article mainly introduces the pull-up, load, and pull-down refresh examples of the WeChat applet list. It is of great practical value. Friends in need can refer to it.

1. List (the contents of this part are from the official documents)

For this function, the WeChat applet does not provide controls similar to the listview in Android, so We need to use the wx:for control attribute to bind an array and repeatedly render the component with the data of each item in the array to achieve the effect of a list.

<view wx:for="{{array}}">
 {{index}}: {{item.message}}
</view>

Page({
 data: {
 array: [{
  message: 'foo',
 }, {
  message: 'bar'
 }]
 }
})

The subscript variable name of the current item of the default array defaults to index, and the variable name of the current item of the array defaults to item. Of course, it can also be specified through wx:for-item and wx:for-index.

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
 {{idx}}: {{itemName.message}}
</view>

wx:for can also be nested. Below is a multiplication table

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
 <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
 <view wx:if="{{i <= j}}">
  {{i}} * {{j}} = {{i * j}}
 </view>
 </view>
</view>

block wx: for

Similar to block wx:if, wx:for can also be used on the 2b5957c2850173214f4ea7f1261e9a0f tag to render a structure block containing multiple nodes. For example:

<block wx:for="{{[1, 2, 3]}}">
 <view> {{index}}: </view>
 <view> {{item}} </view>
</block>

wx:key

If the position of the items in the list will change dynamically or new items are added to the list, and you want the list to The items maintain their own characteristics and status (such as the input content in 0f0306f9b187f2e363126bc29c8b1420, the selected status of 698d939a2c9041f2302734cfeb04788e), and you need to use wx:key to specify the unique identifier of the item in the list.

The value of wx:key is provided in two forms

1. String, representing a property of the item in the array of the for loop. The value of the property needs to be the only one in the list. A string or number and cannot be changed dynamically.

2. The reserved keyword *this represents the item itself in the for loop. This representation requires the item itself to be a unique string or number, such as:
Rendering is triggered when the data changes When the layer is re-rendered, components with keys will be corrected, and the framework will ensure that they are reordered rather than re-created to ensure that the components maintain their own state and improve the efficiency of list rendering.

If wx:key is not provided, a warning will be reported. If you know clearly that the list is static, or you do not need to pay attention to its order, you can choose to ignore it.

Sample code:

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

Page({
 data: {
 objectArray: [
  {id: 5, unique: 'unique_5'},
  {id: 4, unique: 'unique_4'},
  {id: 3, unique: 'unique_3'},
  {id: 2, unique: 'unique_2'},
  {id: 1, unique: 'unique_1'},
  {id: 0, unique: 'unique_0'},
 ],
 numberArray: [1, 2, 3, 4]
 },
 switch: function(e) {
 const length = this.data.objectArray.length
 for (let i = 0; i < length; ++i) {
  const x = Math.floor(Math.random() * length)
  const y = Math.floor(Math.random() * length)
  const temp = this.data.objectArray[x]
  this.data.objectArray[x] = this.data.objectArray[y]
  this.data.objectArray[y] = temp
 }
 this.setData({
  objectArray: this.data.objectArray
 })
 },
 addToFront: function(e) {
 const length = this.data.objectArray.length
 this.data.objectArray = [{id: length, unique: &#39;unique_&#39; + length}].concat(this.data.objectArray)
 this.setData({
  objectArray: this.data.objectArray
 })
 },
 addNumberToFront: function(e){
 this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
 this.setData({
  numberArray: this.data.numberArray
 })
 }
})

2. Pull down to refresh

The mini program page integrates the drop-down function and provides an interface. We only need some configuration to get the event callback.

1. Need to be configured in the .json file. (The format of the .json file and the difference between app.json and the .json file of a specific page have been mentioned before. If you have any questions, you can move on.) If configured in the app.json file, then the entire program can be pulled down to refresh. If it is written in the .json file of a specific page, then it is the corresponding page and can be pulled down to refresh.

The .json file of the specific page:

{
 "enablePullDownRefresh": true
}

app.json file:

"window": {
 "enablePullDownRefresh": true
 }

2. Add a callback function in the js file

 // 下拉刷新回调接口
 onPullDownRefresh: function () {
  // do somthing
 },

3. Add data

The usual pull-down refresh operation is to reset the query conditions. Let the page display the latest page of data. The following is the code of the pull-down refresh callback interface in the author's demo, and it is also the general operation process.

 // 下拉刷新回调接口
 onPullDownRefresh: function () {
  // 我们用total和count来控制分页，total代表已请求数据的总数，count代表每次请求的个数。
  // 刷新时需把total重置为0，代表重新从第一条请求。
  total = 0; 
  // this.data.dataArray 是页面中绑定的数据源
  this.data.dataArray = [];
  // 网络请求，重新请求一遍数据
  this.periphery();
  // 小程序提供的api，通知页面停止下拉刷新效果
  wx.stopPullDownRefresh;
 },

3. Pull-up loading

Same as pull-down refresh, the mini program also provides a callback for pull-up Interface. There is no detailed introduction in the official document. After testing, it was found that the pull-up callback interface does not require additional configuration (you need to configure "enablePullDownRefresh": true in the .json file when pulling down). It will be activated directly when the page slides to the bottom. Can get a callback.

1. Add callback function in js file

 // 上拉加载回调接口
 onReachBottom: function () {
  // 我们用total和count来控制分页，total代表已请求数据的总数，count代表每次请求的个数。
  // 上拉时需把total在原来的基础上加上count，代表从count条后的数据开始请求。
  total += count;
  // 网络请求
  this.periphery();
 },

The above is the detailed content of WeChat applet development list pull-up load pull-down refresh sample code. For more information, please follow other related articles on the PHP Chinese website!