Applet WeChat
Développement de mini-programmes
Une brève discussion sur la fa?on d'implémenter les fonctions d'actualisation déroulante et de chargement pull-up dans les mini-programmes?? (avec code)
Une brève discussion sur la fa?on d'implémenter les fonctions d'actualisation déroulante et de chargement pull-up dans les mini-programmes?? (avec code)
Oct 26, 2021 am 10:49 AM
Cet article vous présentera comment implémenter les fonctions d'actualisation déroulante et de chargement pull-up dans le mini-programme. J'espère qu'il vous sera utile !
Lors de l'affichage des données de liste, s'il y a beaucoup de données ou si elles sont mises à jour rapidement, vous devez fournir des fonctions d'actualisation et de chargement déroulant pour améliorer l'expérience utilisateur. [Recommandations d'apprentissage associées?: Tutoriel de développement de mini-programmes]
Actualisation déroulante et chargement par extraction de l'écriture du fichier wxml
Lorsque nous utilisons le composant coulissant de vue défilante pour afficher la liste, il y a un menu déroulant rafra?chissement et chargement pull-up en lui-même Fonction de déclenchement
<scroll-view class="scroll" scroll-y="{{true}}" upper-threshold="50"
bindscrolltoupper="refresh" style="height:700px">
<l-loadmore show="{{upfresh}}" bindscrolltolower="getMore" type="loading" loading-text="拼命刷新中">
</l-loadmore>
<l-loadmore show="{{downfresh}}" type="loading" loading-text="拼命加載中">
</l-loadmore>- scroll-y : s'il faut autoriser le défilement vertical, la valeur par défaut est false, ici nous la définissons sur true
- seuil supérieur : à quelle distance du haut/gauche doit être déclencher l'événement scrolltoupper (dérouler vers le bas pour actualiser)
- bindscrolltoupper?: scroll Déclenché lors du défilement vers le haut/gauche, définissez ici la fonction qui doit être déclenchée lors du défilement vers le haut
- bindscrolltolower?: déclenché lors du défilement vers le haut/droite
Présentation du framework line-ui
Ici, j'utilise le menu déroulant, l'actualisation et le pull-up. Le composant d'affichage de chargement est fourni par le framework lin-ui. Ici, je vais parler de la fa?on d'introduire le framework lin. -ui framework?:
adresse officielle du document lin-ui
//在小程序項目目錄中執(zhí)行下面的函數(shù) npm install lin-ui
Puis introduisez-le dans le fichier json de la page où le composant doit être introduit
"usingComponents": {
"l-loadmore":"/miniprogram_npm/lin-ui/loadmore/index",
"l-loading":"/miniprogram_npm/lin-ui/loading/index",
}, De cette fa?on, le composant lin-ui a été introduit avec succès
écriture de code js
data: {
downfresh:false,//底部加載展示控制
upfresh:false//頂部加載展示控制
},Tout d'abord, définissez si le composant de chargement est affiché dans les données. Par défaut, il ne sera pas affiché
Tirez vers le bas pour actualiser le code js
//下拉刷新
refresh(){
if(this.data.upfresh){
console.log("還沒刷新完成")
return;
}
var that = this;
this.setData({
upfresh: true,
// upfresh:false
})
setTimeout(function() {
//updateData為自己的數(shù)據(jù)更新邏輯代碼
that.updateData(true,()=>{
that.setData({
upfresh: false,
});
})
// wx.hideLoading();
console.info('下拉刷新加載完成.');
}, 500);
},
//更新數(shù)據(jù)
updateData:function(tail, callback) {
var that = this;
console.log("updatedata-=-=seea"+that.data.searchValue)
wx.request({
url: app.gBaseUrl + 'compony-detail/page',
method: 'GET',
data: {
page: 0,
count: 20,
componyname:that.data.searchValue
},
success: (res) => {
this.setData({
componys: res.data
})
if (callback) {
callback();
}
}
})
},Tirez vers le haut. Chargement du code js
/**
* 滑動到底部加載更多
*/
getMore(){
// downloadingData=this.data.downloadingData
if(this.data.downfresh){
console.log("還沒加載完成")
return;
}
var that = this;
this.setData({
downfresh: true,
// upfresh:false
})
this.setData({
downloadingData: true
// upfresh:false
})
setTimeout(function() {
that.loadData(true,()=>{
that.setData({
downfresh: false
});
})
// wx.hideLoading();
console.info('上拉數(shù)據(jù)加載完成.');
}, 1000);
},
loadData: function(tail, callback) {
var that = this;
wx.request({
url: app.gBaseUrl + 'compony-detail/page',
method: 'GET',
data: {
page: that.data.componys.length,
count: 20,
componyname:that.data.searchValue
},
success: (res) => {
// console.log(JSON.stringify(res.data))
that.setData({
componys: that.data.componys.concat(res.data),
});
if (callback) {
callback();
}
}
})
},Nous avons déjà implémenté l'intégralité des fonctions d'actualisation pull-down et de chargement pull-up. Nous utilisons principalement les caractéristiques des composants de scroll-view pour contr?ler l'affichage et la masquage du composant d'enregistrement en fonction du temps de déclenchement. La mise en ?uvre globale n'est pas très difficile, le code spécifique peut être ajusté de manière appropriée en fonction de votre situation réelle.
Pour plus de connaissances sur la programmation, veuillez visiter?: Vidéos de programmation?! !
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Développer l'applet WeChat en utilisant Python
Jun 17, 2023 pm 06:34 PM
Avec la popularité de la technologie Internet mobile et des smartphones, WeChat est devenu une application indispensable dans la vie des gens. Les mini-programmes WeChat permettent aux gens d'utiliser directement des mini-programmes pour résoudre certains besoins simples sans télécharger ni installer d'applications. Cet article explique comment utiliser Python pour développer l'applet WeChat. 1. Préparation Avant d'utiliser Python pour développer l'applet WeChat, vous devez installer la bibliothèque Python appropriée. Il est recommandé d'utiliser ici les deux bibliothèques wxpy et itchat. wxpy est une machine WeChat
Implémenter des effets de retournement de cartes dans les mini-programmes WeChat
Nov 21, 2023 am 10:55 AM
Implémentation d'effets de retournement de cartes dans les mini-programmes WeChat Dans les mini-programmes WeChat, la mise en ?uvre d'effets de retournement de cartes est un effet d'animation courant qui peut améliorer l'expérience utilisateur et l'attractivité des interactions d'interface. Ce qui suit présentera en détail comment implémenter l'effet de retournement de carte dans l'applet WeChat et fournira des exemples de code pertinents. Tout d'abord, vous devez définir deux éléments de carte dans le fichier de mise en page du mini-programme, un pour afficher le contenu avant et un pour afficher le contenu arrière. L'exemple de code spécifique est le suivant?: <!--index.wxml-. ->&l
Alipay a lancé le mini-programme ??Chinese Character Picking-Rare Characters?? pour collecter et compléter la bibliothèque de personnages rares.
Oct 31, 2023 pm 09:25 PM
Selon les informations de ce site du 31 octobre, le 27 mai de cette année, Ant Group a annoncé le lancement du ? Projet de sélection de caractères chinois ? et a récemment inauguré de nouveaux progrès : Alipay a lancé le mini-programme ? Sélection de caractères chinois-Caractères rares ?. pour collecter des collections de la société Les personnages rares complètent la bibliothèque de personnages rares et offrent différentes expériences de saisie pour les personnages rares afin d'aider à améliorer la méthode de saisie des caractères rares dans Alipay. Actuellement, les utilisateurs peuvent accéder à l'applet ??Caractères peu communs?? en recherchant des mots-clés tels que ??capture de caractères chinois?? et ??caractères rares??. Dans le mini-programme, les utilisateurs peuvent soumettre des images de caractères rares qui n'ont pas été reconnus et saisis par le système. Après confirmation, les ingénieurs d'Alipay effectueront des entrées supplémentaires dans la bibliothèque de polices. Ce site Web a remarqué que les utilisateurs peuvent également découvrir la dernière méthode de saisie par fractionnement de mots dans le mini-programme. Cette méthode de saisie est con?ue pour les mots rares dont la prononciation n'est pas claire. Démantèlement utilisateur
Les petits programmes peuvent-ils réagir??
Dec 29, 2022 am 11:06 AM
Les mini-programmes peuvent utiliser React. Comment l'utiliser?: 1. Implémentez un moteur de rendu basé sur "react-reconciler" et générez un DSL?; 2. Créez un mini composant de programme pour analyser et restituer le DSL 3. Installez npm et exécutez le développeur Build?; npm dans l'outil?; 4. Introduisez le package dans votre propre page, puis utilisez l'API pour terminer le développement.
Comment utiliser Vue pour implémenter l'actualisation déroulante et le chargement pull-up??
Jun 25, 2023 pm 06:52 PM
Avec la popularité de l'Internet mobile, le pull-down pour actualiser et le pull-up pour charger sont devenus l'une des fonctionnalités standard des applications et des sites Web modernes. Ces deux méthodes d'interaction peuvent grandement améliorer l'expérience utilisateur et les performances des pages. Sous le framework Vue, nous pouvons utiliser des plug-ins ou écrire du code nous-mêmes pour réaliser ces deux méthodes d'interaction. Implémentation de l'actualisation déroulante L'actualisation déroulante fait référence à l'opération dans laquelle l'utilisateur déclenche l'actualisation des données en déroulant la page. Dans Vue, nous pouvons implémenter l'actualisation déroulante via toutes les options et API de Vue, ainsi que la méthode la plus rapide et la plus efficace.
Comment Uniapp réalise une conversion rapide entre les mini-programmes et H5
Oct 20, 2023 pm 02:12 PM
La manière dont Uniapp peut réaliser une conversion rapide entre les mini-programmes et le H5 nécessite des exemples de code spécifiques. Ces dernières années, avec le développement de l'Internet mobile et la popularité des smartphones, les mini-programmes et le H5 sont devenus des formulaires de candidature indispensables. En tant que cadre de développement multiplateforme, uniapp peut réaliser rapidement la conversion entre les petits programmes et H5 sur la base d'un ensemble de codes, améliorant considérablement l'efficacité du développement. Cet article présentera comment Uniapp peut réaliser une conversion rapide entre les mini-programmes et H5, et donnera des exemples de code spécifiques. 1. Introduction à uniapp unia
Vous apprendre à utiliser des modèles de messages de compte public dans des mini-programmes (avec des idées détaillées)
Nov 04, 2022 pm 04:53 PM
Cet article vous présente quelques problèmes liés aux mini-programmes WeChat. Il présente principalement comment utiliser les modèles de messages de compte officiel dans les mini-programmes. J'espère que cela sera utile à tout le monde.
Tutoriel sur l'écriture d'un programme de chat simple en Python
May 08, 2023 pm 06:37 PM
Idée d'implémentation x01 Mise en place du serveur Tout d'abord, c?té serveur, le socket est utilisé pour accepter les messages. Chaque fois qu'une demande de socket est acceptée, un nouveau thread est ouvert pour gérer la distribution et l'acceptation des messages. En même temps, il y a un gestionnaire. pour gérer tous les Threads, réalisant ainsi le traitement des diverses fonctions du salon de discussion. La mise en place du client x02 est beaucoup plus simple que celle du serveur. La fonction du client est uniquement d'envoyer et de recevoir des messages, et de saisir des caractères spécifiques en fonction. règles spécifiques. Pour pouvoir utiliser différentes fonctions, il suffit donc, c?té client, d'utiliser deux threads, l'un est dédié à la réception de messages et l'autre à l'envoi de messages. Quant à pourquoi ne pas en utiliser un, celui-là. c'est parce que, seulement
