Certaines fonctionnalités du développement d'applets

Préparation avant le projet

Désactiver l'avertissement automatique de surcharge thermique：Détails->Paramètres locaux->Fermer“Activer la surcharge thermique automatique du Code”

Nouveau projet et structure du projet

Configurer les effets de la barre de navigation

Globalapp.json->window

ConfigurationtabBar

Dans l'ensembleapp.jsonNeutralisationwindowNiveau pour créer untabBarNoeud

Réaliser l'effet de la carte de la roue

Adresse de l'interface

①Interface pour obtenir la liste des données du diagramme de rotation
②Définir dans la Sous - page la méthode d'obtention des données du diagramme de rotation

③InonloadAppelez cette méthode dans-AdoptionthisAppelé dès que la page instance est chargée

④AdoptionsetDate（） Assigner des valeurs aux données dataLe tableau à l'intérieur

 data: {
    
    // Liste des données de la carte de diffusion 
    swiperList:[]

  },
 // Méthode d'obtention des données du diagramme de rotation 
  getSwiperLsit()
  {
    
    wx.request({
    
      url:'https://www.escook.cn/slides',
      method:'GET',
      success:(res)=>{
    
        console.log(res);  
        this.setData({
    
        
          swiperList:res.data
        })
      }
    })

  },

⑤ L'effet du rendu d'un diagramme de roue

<swiper indicator-dots circular>
<swiper-item wx:for="{
    {swiperList}}" wx:key="id">
<image src="{
    {item.image}}">
</image>
</swiper-item>
</swiper>

Fonction pull up touch Bottom

Étape 1- Définir une méthode pour obtenir des couleurs au hasard

 data: {
    

    colorList:[]
  },
  
   getColors(){
    
wx.request({
    
  url: 'https://www.escook.cn/api/color',
  method:'get',
  success:({
     data:res})=>{
    
    console.log(res)
    // Data Splice
    this.setData({
    
      colorList:[...this.data.colorList,...res.data]
    })
  }
})
  },

Étape 2- Obtenir les données initiales lorsque la page est chargée

  /** * Fonction du cycle de vie--Chargement de la page d'écoute */
  onLoad(options) {
    
this.getColors()
  },

Étape 3-RendreUI Structure et embellissement de la page

<!--pages/contact/contact.wxml-->
<view wx:for="{
     {colorList}}" wx:key="index" class="num-item" style="background-color: rgba({
        {
        item}});">{
   {item}}</view>

La page doit être assez grande pour être mise à jour

Étape 4-Obtenez une couleur aléatoire lorsque vous tirez vers le haut et touchez le bas

//Fonction de gestion de l'événement pull Bottom sur la page
onReachBottom:function(){
    
// Appelez la méthode pour obtenir des couleurs aléatoires 
this.getColors()
}

Tirer vers le Haut rafraîchir, Accès unique aux données 10Article (s),Par10La barre devient20Article (s)

Étape 5-AjouterloadingEffet de rappel

  getColors(){
    

    //PrésentationloadingEffets
    wx.showLoading({
    
      title: 'Chargement des données...',
    })

wx.request({
    
  url: 'https://www.escook.cn/api/color',
  method:'get',
  success:({
     data:res})=>{
    
    console.log(res)
    // Data Splice
    this.setData({
    
      colorList:[...this.data.colorList,...res.data]
    })
  },
  // Désactiver manuellement le chargement des données 
  complete:()=>{
    
    wx.hideLoading()
  }
})
  },

Étape 6-Réglage des gaz sur le fond de contact de traction

 data: {
    
    colorList:[],
    isloading:false
  },
  
  getColors(){
    
    this.setData({
    
     isloading:true
    })
    //PrésentationloadingEffets
    wx.showLoading({
    
      title: 'Chargement des données...',
    })
wx.request({
    
  url: 'https://www.escook.cn/api/color',
  method:'get',
  success:({
     data:res})=>{
    
    console.log(res)
    // Data Splice
    this.setData({
    
      colorList:[...this.data.colorList,...res.data]
    })
  },
  // Désactiver manuellement le chargement des données 
  complete:()=>{
    
    wx.hideLoading()
    this.setData({
    
      isloading:false
    })
  }
})
  },
  
   onReachBottom() {
    
    if(this.data.isloading) return
this.getColors()
  },