Example of using mint-ui in vue-JS Tutorial-php.cn

Example of using mint-ui in vue

亚连

Release： 2018-05-26 14:54:38

Original

1571 people have browsed it

Mint UI is a mobile component library based on Vue.js launched by the Ele.me front-end team. This article mainly introduces the usage examples of mint-ui in vue. Here is a detailed code, if necessary Friends can refer to

This article introduces the use examples of mint-ui in vue and shares it with everyone. The details are as follows:

First put the mint-ui Chinese document

I have been using mint-ui recently and found that the explanations of some plug-ins are not very detailed, and the codes used in some examples cannot be found. The sharing on github contains all markdown files, and the content is the online document

. I happen to be using it. The information I can find online is not very detailed, so I write it myself. Keep updating...emmmmm, it should be okay, I'm so lazy. Hope it can help others.

Introduce the features of mint-ui

Feature introduction

##Mint UI contains rich CSS and JS components, which can Meet daily mobile development needs. Through it, you can quickly build a page with a unified style and improve development efficiency.
True loading of components on demand. You can load only the declared components and their style files, without worrying about the file size being too large.
Taking into account the performance threshold of the mobile terminal, Mint UI uses CSS3 to handle various animations to avoid unnecessary redrawing and rearrangement of the browser, so that users can get a smooth experience. experience.
Relying on Vue.js’ efficient componentization solution, Mint UI is lightweight. Even if all are imported, the compressed file size is only ~30kb (JS CSS) gzip.

This component library is suitable for mobile page development based on vue.

1. How to use cell

Let’s throw a picture first↓

When making the switch, think Make it text and switch on both sides of the list. The effect couldn't come out, and I found that there were many people like me who were desperately looking for switch documentation and information about switch. Then actually, you should use cell.

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

Copy after login

Use the cell layout and combine it with switch. produces the following results.

2.Infinite scroll is used in combination with Navbar.

Navbar is like this↓

Infinite scroll is like this↓

Combining the two is to nest the Infinite scroll inside

, and then the effect will be Out.

It’s simply purple.

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

Copy after login

The basic page will appear.

One small problem is that this is a page and the scroll bars are shared. In other words, after you pull out several pages of data in tab one, and then go to tab two, the position of the scroll bar will not change, and the content of your tab two will be pulled out for many pages of data. If a tab has less data, it will affect the data loading of other tabs.

After searching for this problem for a long time, I finally found a simple solution. In Infinite-Scroll, add a

v-if=selected == id, combine Infinite-scroll with the id and selected of the tab, and only when the selected selected corresponds to the id, the corresponding Infinite-Scroll.

The code of Infinite-Scroll is as follows:

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

Copy after login

Modify the v-if conditions as needed.

The method bound to v-infinite-scroll will be executed for the first time after vue is mounted and before, and does not need to be called separately.

3. Picker, three-level linkage of address

There is a very simple three-level linkage here, but I couldn’t find it when I wanted to use it before. It’s so troublesome to write one myself. Put the picture first

First get the address

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

  });

},

Copy after login

Then set the third-level address

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

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Improve ajax list request experience based on h5 history

Briefly talk about AJAX core objects

Detailed explanation of ajax data transmission method examples

The above is the detailed content of Example of using mint-ui in vue. For more information, please follow other related articles on the PHP Chinese website!