analyse de cas mint-ui+vue-js tutoriel-php.cn

analyse de cas mint-ui+vue

php中世界最好的语言

Libérer： 2018-06-11 09:54:21

original

1772 Les gens l'ont consulté

Cette fois, je vais vous apporter une analyse de cas mint-ui+vue. Quelles sont les précautions à prendre pour l'analyse de cas mint-ui+vue ?

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

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

Lors du changement , j'ai pensé Faites-en un texte et basculez 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>

Copier après la connexion

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>

Copier après la connexion

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 et la sélection de l'onglet 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"
>

Copier après la connexion

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. Mettez d'abord la photo

Obtenez d'abord l'adresse

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'
      }
    ]
  });
},

Copier après la connexion

Puis définissez l'adresse de troisième niveau

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]);
}

Copier après la connexion

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