Mint UI 使用mt-loadmore等组件

背景

项目需要移动端页面，于是就采用了mintUI进行开发。用着用着，有些地方写不出想要的效果，最后加入elementUI，还是elementUI好用。这个做出了的效果适配性很强，但是我还是觉得用uniApp更适合移动端开发。主要介绍我在项目中用的组件。官网地址半天进不去，我使用的是w3c的。 https://www.w3cschool.cn/mintui/

 

点击事件

这个地方引用官网的原文，做着做着发现点击事件用不了，回头一看官网，en.....

关于事件绑定

在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 .native 修饰符：

<my-component @click.native="handleClick">Click Me</my-component>

从易用性的角度出发，我们对 Button 组件进行了处理，使它可以监听 click 事件：

<mt-button @click="handleButtonClick">Click Me</mt-button>

但是对于其他组件，还是需要添加 .native 修饰符。

mt-navbar 顶部选项卡

例如，需要做一个顶部的筛选，先筛选区域，1的区域出现mt-radio单选框列出所有的区域选项。需要注意options接受的一个数组，和elmentUI相似，需要提供的options是符合要求的。但没有事件可以触发，意味着你得在下面在加个点击按钮。当然你做的是点一下筛一下，也是可以的。

options：['选项A', '选项B', '选项C']

options ：[ {label: '被禁用',value: '值F',disabled: true }]

<mt-navbar v-model="selected">
  <mt-tab-item id="1">区域</mt-tab-item>
  <mt-tab-item id="2">价格</mt-tab-item>
  <mt-tab-item id="3">户型</mt-tab-item>
  <mt-tab-item id="4">更多</mt-tab-item>
</mt-navbar>

<mt-tab-container v-model="selected">
  <mt-tab-container-item id="1">
  <!-里面写自己的内容-->
  <mt-radio align="right" v-model="filter.reginId"  :options="array.regin">
  </mt-radio>
  </mt-tab-container-item>
  <mt-tab-container-item id="2>
   <!-里面写自己的内容-->
  </mt-tab-container-item>
  <mt-tab-container-item id="3">
   <!-里面写自己的内容-->
  </mt-tab-container-item>  
 <mt-tab-container-item id="4">
  <!-里面写自己的内容-->
 </mt-tab-container-item>
</mt-tab-container>

mt-popup 弹出框

点击、触发底部弹窗，修改性别

<mt-field label="性别"   @click.native="popupVisible = true"  placeholder="" v-model="userData.gender"></mt-field>
<!--底部弹出-->
<mt-popup style="width:100%" v-model="popupVisible" position="bottom">
  <mt-radio label="性别" v-model="userData.gender" :options="['男', '女']"></mt-radio>
</mt-popup>

 

mt-loadmore下拉/上拉刷新

列表的核心功能，首页mt-loadmore必有一个父级，需要给定overflow:scroll，或者固定高度，autoFill默认为true，他会去自动检测并撑满其容器，我用的false。

<template>
  <div>
    <div style="overflow:scroll">
      <!--二手房数据-->
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill="false">
        <div class="Sudoku new" v-for="item in list" :key="item.id" @click="open(item.id)" style="border-bottom:2px solid #e8e8e8">
          <div class="SudokuListImg">
          <!--循环数据渲染，自己写-->
        </div>
        <div v-if="list.length > 0 && allLoaded">
          <el-divider content-position="center">我也是有底线的</el-divider>
        </div>
        <div v-if="list.length === 0">
          <el-divider content-position="center">未查询到数据！</el-divider>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>

<script>

export default {

  data() {
    return {
      allLoaded: false,
      filter: {
        keyword: "",
        page: 1,
        limit: 4,
        createAt: null,
        createEnd: null
      },
      list: [],
      total: 0
    };
  },
  created() {
    this.loadTop();
  },
  methods: {
    // 父控件要加上高度，否则会出现上拉不动的情况
    loadTop() {
      // 回到首页
      this.filter.page = 1;
      api.page(this.filter).then(res => {
        if (res.data.code === 200) {
          this.list = res.data.data;
          this.total = res.data.total;
          this.allLoaded = false;
          if (this.filter.page * this.filter.limit >= this.total) {
            this.allLoaded = true;
          }
          // 最后需要手动调用 loadmore 的 onTopLoaded 事件。这是因为在加载数据后需要对组件进行一些重新定位的操作。
          this.$refs.loadmore.onTopLoaded();
        }
      });
    },
    // loadmore 在初始化时会自动检测它的高度是否能够撑满其容器，如果不能则会调用 bottom-method
    loadBottom() {
      this.filter.page = this.filter.page + 1;
      api.secondPage(this.filter).then(res => {
        if (res.data.code === 200) {
          this.list = this.list.concat(res.data.data);
          this.total = res.data.total;
          if (this.filter.page * this.filter.limit >= this.total) {
            this.allLoaded = true;
          }
          this.$refs.loadmore.onBottomLoaded();
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
// 样式被干掉了
</style>

 

最后来个图