Explication détaillée de l'utilisation de mint-ui dans vue

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de mint-ui dans vue. Quelles sont les précautions pour utiliser mint-ui dans vue. Voici un cas pratique, jetons un oeil. .

Mettez d'abord la documentation chinoise de mint-ui

J'ai utilisé mint-ui récemment et j'ai constaté que les explications de certains plug-ins ne sont pas très détaillées, et les codes utilisés dans certains exemples introuvable. Le partage sur github contient tous les fichiers markdown, et le contenu est le document en ligne

Il se trouve que je l'utilise moi-même. Les informations que je peux trouver en ligne ne sont pas très détaillées, donc je les écris moi-même. Continuez à mettre à jour... emmmmm, ça devrait aller, je suis tellement paresseux. J'espère que cela pourra aider les autres.

Présentation des fonctionnalités de mint-ui

Introduction aux fonctionnalités

1. Mint UI contient de riches composants CSS et JS, qui peuvent Répondez aux besoins quotidiens de développement mobile. Grâce à lui, vous pouvez rapidement créer une page avec un style unifié et améliorer l'efficacité du développement.

2. Véritable chargement des composants à la demande. Vous pouvez charger uniquement les composants déclarés et leurs fichiers de style, sans vous soucier de la taille trop volumineuse du fichier.

3. En tenant compte du seuil de performances du terminal mobile, Mint UI utilise CSS3 pour gérer diverses animations afin d'éviter un redessinage et un réarrangement inutiles du navigateur, afin que les utilisateurs puissent bénéficier d'une expérience fluide. expérience.

4. S'appuyant sur la solution de composantisation efficace de Vue.js, Mint UI est légère. Même si tous sont importés, la taille du fichier compressé n'est que d'environ 30 Ko (JS + CSS) gzip.

Cette bibliothèque de composants convient au développement de pages mobiles basées sur Vue.

1. Utilisation du portable

Laissez-moi d'abord vous montrer une photo↓

Faire switch, je veux créer du texte et basculer des deux côtés de la liste. L'effet ne pouvait pas se produire, alors j'ai découvert qu'il y avait beaucoup de gens comme moi qui cherchaient désespérément de la documentation sur Switch et des informations sur Switch. Alors en fait, vous devriez utiliser le cellulaire.

<mt-cell title="开关状态">
  <mt-switch v-model="openValue" @change="changeStatus"></mt-switch>
</mt-cell>

Utilisez la disposition des cellules et combinez-la avec le commutateur. produit les résultats suivants.

2. Le défilement infini est utilisé en combinaison avec Navbar.

La barre de navigation est comme ça↓

Le défilement infini est comme ça↓

Combiner les deux consiste à imbriquer le parchemin infini à l'intérieur de <mt-tab-container-item id="1"></mt-tab-container-item>, puis l'effet sortira.

C’est tout simplement violet.

<mt-navbar v-model="selected" >
  <mt-tab-item id="1">选项一</mt-tab-item>
  <mt-tab-item id="2">选项二</mt-tab-item>
</mt-navbar>
<mt-tab-container v-model="selected">
  <mt-tab-container-item id="1">
    <p v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
        class="content"
    >
    </p>
  </mt-tab-container-item>
  <mt-tab-container-item id="2">
    <p v-infinite-scroll="loadMoreReceive"
        infinite-scroll-disabled="loadingReceive"
        infinite-scroll-distance="10"
        class="content"
    >
    </p>
  </mt-tab-container-item>
</mt-tab-container>

La page de base apparaîtra.

Un petit problème c'est qu'il s'agit d'une page et que les barres de défilement sont partagées. En d'autres termes, après avoir extrait plusieurs pages de données dans l'onglet un, puis passé à l'onglet deux, la position de la barre de défilement ne changera pas et le contenu de votre onglet deux sera extrait pour plusieurs pages de données. Si un onglet contient moins de données, cela affectera le chargement des données des autres onglets.

Après avoir longuement cherché ce problème, j'ai finalement trouvé une solution simple. Dans Infinite-Scroll, ajoutez un v-if=selected == id et combinez Infinite-scroll avec l'identifiant de l'onglet et sélectionné. Lorsque la sélection sélectionnée correspond à l'identifiant, le Infinite-Scroll correspondant sera effectué.

Le code d'Infinite-Scroll est le suivant :

<p v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="10"
  class="content"
  v-if="selected == 1"
>

Modifiez les conditions v-if selon vos besoins. La méthode liée à

v-infinite-scroll sera exécutée pour la première fois après le montage de vue et avant, et n'a pas besoin d'être appelée séparément.

3. Sélecteur, liaison d'adresse à trois niveaux

Il existe ici une liaison à trois niveaux très simple, mais je ne l'ai pas trouvée quand je voulais. utilisez-le avant. C’est tellement difficile d’en écrire un moi-même. Postez d'abord la photo

首先获取地址

getRegion(){
  var root=this;
  <!-- 通过/region 接口获取三级地址，然后存入regionArr -->
  http.get("/region").then(function (data) {
    root.regionArr=data.data.data;
    <!-- 存放省 -->
    for(var i=0;i<root.regionArr.length;i++){
      root.region_province[i]=root.regionArr[i].value;
    }
    <!-- 存放市 -->
    for(var i=0;i<root.regionArr[0].children.length;i++){
      root.region_city[i]=root.regionArr[0].children[i].value;
    }
    <!-- 存放区 -->
    for(var i=0;i<root.regionArr[0].children[0].children.length;i++){
      root.region_zone[i]=root.regionArr[0].children[0].children[i].value;
    }
    root.region=[
      {
        flex: 1,
        values: root.region_province,
        textAlign: 'left',
        className:'picker_Slot'
      },
      {
        pider: true,
        content: '-',
        className: 'slot2'
      },
      {
        flex: 1,
        values: root.region_city,
        textAlign: 'center',
        className:'picker_Slot'
      },
      {
        pider: true,
        content: '-',
        className: 'slot2'
      },
      {
        flex: 1,
        values: root.region_zone,
        textAlign: 'right',
        className:'picker_Slot'
      }
    ]
  });
},

然后设置三级地址

onValuesChange(picker, values) {
  var root=this;
  var str_1=[];
  var str_2=[];
  for(var i in root.regionArr){
    // 获取省，并重置市级名称
    if(root.regionArr[i].value == values[0]){
      for(var j in root.regionArr[i].children){
        str_1.push(root.regionArr[i].children[j].value);
        // 获取市级，并重置区级的名称
        if(root.regionArr[i].children[j].value == values[1]){
          // 当市级下不存在区名市，置空。
          if(root.regionArr[i].children[j].children != null){
            for(var k in root.regionArr[i].children[j].children){
              str_2.push(root.regionArr[i].children[j].children[k].value);
            }
          }else{
            str_2.push(" ");
          }
        }
      }
      picker.setSlotValues(1, str_1);
      picker.setSlotValues(2, str_2);
    }
  }
  // 赋值，初始时置为上一页返回的值
  root.$set(root.printerMessage,'province',values[0] == null ? root.printerMessage.province : values[0]);
  root.$set(root.printerMessage,'city',values[1] == null ? root.printerMessage.city : values[1]);
  root.$set(root.printerMessage,'area',values[2] == null ? root.printerMessage.area : values[2]);
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎么选择使用jQuery版本

jQuery三种$()使用详解

HTML常用的属性知识点总结

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!