Exemple d'utilisation de mint-ui dans vue-js tutoriel-php.cn

Exemple d'utilisation de mint-ui dans vue

亚连

Libérer： 2018-05-26 14:54:38

original

1634 Les gens l'ont consulté

Mint UI est une bibliothèque de composants mobiles basée sur Vue.js lancée par l'équipe front-end d'Ele.me. Cet article présente principalement les exemples d'utilisation de mint-ui dans vue. Voici un code détaillé, si nécessaire, les amis peuvent. reportez-vous à

Cet article présente les exemples d'utilisation de mint-ui dans vue et le partage avec tout le monde. Les détails sont les suivants :

Mettez d'abord le document chinois 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 que les codes utilisés dans certains exemples sont introuvables. 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 importante 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

, puis l'effet sortira. <mt-tab-container-item id="1"></mt-tab-container-item>

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

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é. v-if=selected == id

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 si nécessaire.

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: &#39;left&#39;,
        className:&#39;picker_Slot&#39;

      },
      {
        pider: true,
        content: &#39;-&#39;,
        className: &#39;slot2&#39;
      },
      {
        flex: 1,
        values: root.region_city,
        textAlign: &#39;center&#39;,
        className:&#39;picker_Slot&#39;
      },
      {
        pider: true,
        content: &#39;-&#39;,
        className: &#39;slot2&#39;
      },
      {
        flex: 1,
        values: root.region_zone,
        textAlign: &#39;right&#39;,
        className:&#39;picker_Slot&#39;
      }
    ]

  });

},

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,&#39;province&#39;,values[0] == null ? root.printerMessage.province : values[0]);
  root.$set(root.printerMessage,&#39;city&#39;,values[1] == null ? root.printerMessage.city : values[1]);
  root.$set(root.printerMessage,&#39;area&#39;,values[2] == null ? root.printerMessage.area : values[2]);
}

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.