mint-ui的loadmore ‘上拉加载更多’ 问题解决

news/2024/7/23 22:01:14 标签: mint-ui, vue

 

如上图所示,下拉正常,但是上拉加载更多不执行

问题解决:

为滚动框设置高度,并设置overflow:auto
代码如下:

computedHeight () {
   const viewH = this.getViewPort().height
   try {
      this.listHeight = (viewH - this.$refs['list-box'].getBoundingClientRect().top - 15) + 'px'
  } catch (e) {
        this.listHeight = (viewH - this.$refs['list-box'].offsetTop - 15) + 'px'
      }
      this.$refs.loadmore.init()
    },
getViewPort () {
   if (document.compatMode == 'BackCompat') { // 浏览器嗅探,混杂模式
      return {
          width: document.body.clientWidth,
          height: document.body.clientHeight
       }
   } else {
        return {
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight
        }
      }
    }

最外层设置样式:

 .list-box{
      overflow: auto;
      -webkit-overflow-scrolling: touch;
  }

注: 高度减15 是为了显示提示信息 “上拉加载更多”


http://www.niftyadmin.cn/n/1557786.html

相关文章

aria2c下载磁力链接

为什么80%的码农都做不了架构师?>>> 下载磁力链接 aria2c -x 16 "magnet:?xturn:btih:1fcb63ea1e3c6a50787da8ea869278788265d5cc&dnThe.Flash.2014.S04E02.720p.HDTV.X264-DIMENSION%5Brartv%5D&trhttp%3A%2F%2Ftracker.trackerfix.com%…

react中使用antd的过程即踩坑(警告信息)

1.在使用react-antd,Table组件时报警告,虽然不影响效果但是,对于强迫症的人来说是无法接受的。 react-dom.development.js?cada:506 Warning: Encountered two children with the same key, null. Keys should be unique so that components maintain …

[转]iOS 30个动画详细解释

http://blog.csdn.net/iunion/article/details/11031451

opengl es3.0学习篇二:着色器和程序

2019独角兽企业重金招聘Python工程师标准>>> opengl es学习篇二:着色器和程序 学习资料来源: OpenGL ES 3.0编程指南 OpenGL ES 2 for Android —a Quick-Start Guide https://developer.android.com/guide/topics/graphics/opengl 上一节中学…

解决 clipboardjs 在ios内不能复制的问题

问题: 项目为vue-cli创建的,使用Vue-clipboard2组件,在浏览器中正常使用,在公司iOS APP内无法复制,官方demo可以正常复制 排查问题: 所有引入方式都相同,使用方法相同,只好继续做排…

react-antd form表单的使用(验证)

1.引入import { Layout, ConfigProvider, Button, Input, Modal, Form, Table,Pagination } from antd;对应的组件 <Form layout"vertical" onSubmit{this.handleSubmit}><Form.Item label"E-mail">{getFieldDecorator(email, {initialValue:…

yarn修改为淘宝源

yarn修改为淘宝源 查看当前源 yarn config get registry 临时修yran源 yarn save package_name --registry https://registry.npm.taobao.org/ 修改yarn源为taobao源 yarn config set registry https://registry.npm.taobao.org/ 修改yarn源为官方源 yarn config set regi…

[转] IOS开源项目汇总

扫描wifi信息&#xff1a; http://code.google.com/p/uwecaugmentedrealityproject/ http://code.google.com/p/iphone-wireless/ 条形码扫描&#xff1a; http://zbar.sourceforge.net/iphone/sdkdoc/install.html tcp/ip的通讯协议&#xff1a; http://code.google.com…