Liste déroulante de développement d'applets WeChat pour charger la liste déroulante pour actualiser l'exemple de code

Cet article présente principalement l'exemple du pull-up pour charger et du pull-down pour actualiser la liste des applets WeChat. Il est d'une grande valeur pratique et les amis dans le besoin peuvent s'y référer.

1. Liste (le contenu de cette partie est issu des documents officiels)

Pour cette fonction, l'applet WeChat ne fournit pas de contrôles similaires à la liste sous Android , nous devons donc utiliser l'attribut de contrôle wx:for pour lier un tableau et restituer à plusieurs reprises le composant avec les données de chaque élément du tableau pour obtenir l'effet d'une liste.

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

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

Le nom de variable d'indice par défaut de l'élément actuel du tableau est index par défaut, et la variable le nom de l'élément actuel du tableau est par défaut. La valeur par défaut est item, bien sûr, il peut également être spécifié via wx:for-item et wx:for-index.

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

wx : pour peut aussi être imbriqué, ci-dessous se trouve une table de multiplication

<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>

bloc wx:for

Semblable au bloc wx:if, wx:for peut également être utilisé sur la balise pour afficher un bloc de structure contenant plusieurs nœuds. Par exemple :

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

wx:key

Si la position de l'élément dans la liste change dynamiquement ou si de nouveaux éléments sont ajoutés à la liste , et vous souhaitez que les éléments de la liste conservent leurs propres caractéristiques et statuts (tels que le contenu d'entrée dans , l'état sélectionné de ), et vous devez utiliser wx:key pour précisez l'identifiant unique de l'élément dans la liste.

La valeur de wx:key est fournie sous deux formes

1. Chaîne, représentant une certaine propriété de l'élément dans le tableau de la boucle for. le seul dans la liste. Une chaîne ou un nombre et ne peut pas être modifié dynamiquement.

2. Le mot-clé réservé *this représente l'élément lui-même dans la boucle for. Cette représentation nécessite que l'élément lui-même soit une chaîne ou un nombre unique, tel que :
Déclencher le rendu lorsque les données. changements Lorsque la couche est restituée, les composants avec des clés seront corrigés et le framework veillera à ce qu'ils soient réorganisés plutôt que recréés pour garantir que les composants conservent leur propre état et améliorent l'efficacité du rendu de la liste.

Si wx:key n'est pas fourni, un avertissement sera signalé. Si vous savez clairement que la liste est statique, ou si vous n'avez pas besoin de prêter attention à son ordre, vous pouvez choisir de l'ignorer.

Exemple de 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. Déroulez vers le bas pour actualiser

La mini page du programme intègre la fonction déroulante et fournit une interface. Nous n'avons besoin que d'un peu de configuration pour obtenir le rappel de l'événement.

1. Doit être configuré dans le fichier .json. (Le format du fichier .json et la différence entre app.json et le fichier .json d'une page spécifique ont déjà été mentionnés. Si vous avez des questions, vous pouvez passer à autre chose.) S'il est configuré dans le fichier app.json, alors l'ensemble du programme peut être déroulé pour être actualisé. S'il est écrit dans le fichier .json d'une page spécifique, alors il s'agit de la page correspondante et peut être déroulée pour être actualisée.

Le fichier .json de la page spécifique :

{
 "enablePullDownRefresh": true
}

fichier app.json :

"window": {
 "enablePullDownRefresh": true
 }

2. Ajouter une fonction de rappel dans le fichier js

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

3. Ajouter des données

L'opération d'actualisation déroulante habituelle est Réinitialisez les conditions de requête afin que la page affiche la dernière page de données. Ce qui suit est le code de l'interface de rappel d'actualisation déroulante dans la démo de l'auteur, et c'est également le processus de fonctionnement général.

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

3. Chargement pull-up

Identique à l'actualisation déroulante, le mini programme fournit également du pull-up. up chargement L'interface de rappel. Il n'y a pas d'introduction détaillée dans le document officiel.Après les tests, il a été constaté que l'interface de rappel pull-up ne nécessite pas de configuration supplémentaire (lors du retrait, vous devez configurer "enablePullDownRefresh": true dans le fichier .json). sera activé directement lorsque la page glisse vers le bas. Peut recevoir un rappel.

1. Ajouter une fonction de rappel dans le fichier js

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!