mint-ui pull down不起作用

<template>
  <div style="min-height:200px">
    <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange" @bottom-status-change="handleBottomChange" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">

      <ul>
        <li v-for="(item,index) in list">[{{index}}]{{ item.text }}</li>
      </ul>
      <div slot="top" class="mint-loadmore-top">
        <span v-show="topStatus !== ‘loading‘" :class="{ ‘rotate‘: topStatus === ‘drop‘ }">↓</span>
        <span v-show="topStatus === ‘loading‘">上拉加载中...</span>
      </div>
      <div slot="bottom" class="mint-loadmore-bottom">
        <span v-show="bottomStatus !== ‘loading‘" :class="{ ‘rotate‘: topStatus === ‘drop‘ }">↑</span>
        <span v-show="bottomStatus === ‘loading‘">下拉加载中...</span>
      </div>

    </mt-loadmore>
  </div>
</template>

<script>
import axios from ‘axios‘;
import  * as _global from ‘../../plugs/global‘;
import TrendFun from ‘../../plugs/function‘;
import BUS from ‘../../plugs/bus.js‘;
import { Toast,Loadmore } from ‘mint-ui‘;

let trendFun=new TrendFun(); //公共函数库
let __REQUEST=trendFun.__REQUEST();
let __URILIST=_global.default;

  export default {
    name: ‘app‘,
    data(){
      return{
        allLoaded:false,
        page:0,
        list: [ ]   

      }
    },
    created(){

      //this.getList();
    },
      methods:{
              handleTopChange:function(status) {
                this.topStatus = status;
                console.log("this.topStatus = status; "+ status);
              },

              handleBottomChange:function(status) {
                this.bottomStatus = status;
                console.log("this.bottomStatus = status; "+ status);
              },

              getList:function(page){

                  __REQUEST.bizParams={
                    "bankCardId":"" ,// 银行卡ID ----非必填,只有在专门查一个银行卡时传
                    "cardBizCode":"WITHOLDING",// 卡业务编码 默认卡(DEFAULT), 自动代扣卡(WITHOLDING) ----- 非必填,不填查所有的
                    "type":"" // 卡类型 0:查询所有卡 1:只查储蓄卡 2:只查信用卡 ----- 非必填
                  }
                  let request=__REQUEST;
                  axios.get(__URILIST[2], {
                      params:request
                    })
                    .then(response=>{
                      let res=response.data; //axios返回的数据是用response.data包括的,和jquery不一样
                      if(res.data){
                        let tmparry=[];
                        //console.log(res.data.debitList);
                        res.data.msgList.map((e,i)=>{
                           if(e.msgType==1 && i<=3){
                              tmparry.push(e);
                            }

                        });
                        this.list = this.list.concat(tmparry);
                        //this.list.push(tmparry);
                        console.log(tmparry);
                      }

                    })
                    .catch(function (error) {
                      console.log(error);
                    });

            },
            loadTop:function(){
                  console.log(this.page);
                  //默认是第三页,下拉刷新的时候获取第一页
                  //this.page=1;
                  this.getList(this.page);
                  this.$refs.loadmore.onTopLoaded(); //手动调用,组件定位
                  this.$refs.loadmore.onBottomLoaded();
                  console.log("上拉执行");
              },
              loadMore:function(){
                  console.log("loadMore");

              },
              loadBottom:function() {
                  console.log("下拉在执行");
                  this.page=this.page+1;

                  console.log("this.page:"+this.page);
                  this.getList(this.page);
                  if(this.page==20){
                    this.allLoaded=true;  //当所有数据 全部读取完成的时候 停止下拉读取数据
                    //this.$refs.loadmore.onBottomLoaded();
                  }

            }

    },
    components: {

    }
  }
</script>
时间: 2024-10-22 22:41:45

mint-ui pull down不起作用的相关文章

vue mint ui 手册文档对于墙的恐惧

npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用. <!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入

基于Mint UI开发VUE项目一之环境搭建和头部底部导航栏的实现

一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大.考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验.依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS

基于VUE.JS的移动端框架Mint UI

Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint-ui.github.io/docs/# 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库.自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周发布了 0.2.0 版本.本文介绍如何从零开始构建一个使用 Mint UI 的 Vu

vue2.0中使用mint ui做底部选项卡切换

首先在vue2.0中webpack中下载 mint ui 然后再main.js引入 这样就可以使用mint ui里面的布局组件了html部分(就是你要使用底部选项卡的部分) <!--底部选项卡--><mt-tab-container v-model="selected"> <mt-tab-container-item id="one"> one </mt-tab-container-item> <mt-tab-c

iView webapp / Mint UI / MUI [前端UI]

前端UI iView webapp一套高质量的 微信小程序 UI 组件库 https://weapp.iviewui.com/?from=iview Mint UI 基于 Vue.js 的移动端组件库 http://mint-ui.github.io/#!/zh-cn MUI 最接近原生APP体验的高性能前端框架 http://dev.dcloud.net.cn/mui/ 原文地址:https://www.cnblogs.com/pengchenggang/p/10108891.html

Mint UI Example的运行

Mint -UI是新推出的移动端UI框架 官网 不过官网上的文档例子不是很全面. 建议下载他们提供的example来学习. 1.examplle源码下载地址 2.打开项目,我这里使用webstorm, 然后按提示安装npm install 依赖 3.运行npm run dev ,不过发现有报错" Missing radix parameter",点击连接查看原因以及解决办法 4.最后得到的是以下信息,表面打包有效. 但是,访问地址,要怎么在浏览器上访问呢? 要更改配置,如下: 即将 h

mint ui的tabBar监听路由变化实现tabBar切换

说明 最近学习vue,使用了mint ui的tabBar,感觉好难受,结合 tab-container使用更难受,因为它不是根据路由来切换页面的.mui与它基本相反,因此它能根据搜索栏的路由变化,相应的tabBar高亮显示,而mint ui就不能,要加点代码实现了. mint ui tabBar标签栏 //页面 和 数据 <template> <div id="main"> <mt-tabbar v-model="selected"&g

mint ui datetimepicker 手机端jquery datetimepicker 总结应用

对于手机端datetimepicker的使用 在使用minit ui 的datatimepicker的使用方法 首先它需要两个触发器 这里因为项目用到的是开始到结束的时间 我就点击的时候手动传入了一个参数 <input id='start' type="text" class='form-control input-sm' readonly="" name='start' @click='openPicker("start")' v-mod

Mint UI 的 Infinite scroll 无限滚动组件 一直触发 loadMore

项目中有用到  Infinite scroll  无限滚动组件 发现一个神奇的问题, loadMore 一直无限触发,黑人问号 ??? 几经百度,谷歌,终于解决l, 此文仅做记录 话不多说,直接看问题 官方地址:http://mint-ui.github.io/#!/zh-cn import import { InfiniteScroll } from 'mint-ui'; Vue.use(InfiniteScroll); HTML: <ul v-infinite-scroll="load

Mint UI 之loadmore组件的坑:内部元素头部被遮挡了一部分

前端经常会遇到数据分页加载的需求,mint-ui组件为大家提供了loadmore组件 但是我在使用的时候,遇到了一个问题:写好布局和样式以及逻辑之后,我的mt-loadmore标签的头部总是不顶在父元素content的顶部,给了padding也不管用;看了下mint-loadmore-top样式有.mint-loadmore-top { margin-top: -50px; }但这个不能改,改了后下拉显示更多...就会一直显示. 网上看到说添加:auto-fill:"false"结果还