search

ydcss / vue-ydui

A mobile components Library with Vue2.js. 一只基于Vue2.x的移动端组件库。
http://vue.ydui.org
MIT License
2.75k stars 559 forks source link

滚动加载无法触发回掉函数的问题 #386

Closed gong135 closed 6 years ago

gong135 commented 6 years ago

问题描述

引入的 这个组件 ，这个回掉函数loadList2无法触发。 （尽可能详细地描述一下问题）

提示错误信息

木有错误提示

复现步骤

{{item.title}}
¥{{item.marketprice}} ¥{{item.productprice}}
content
 啦啦啦，啦啦啦，没有数据啦~~

export default { data() { return { page1: 1, page2: 1, pageSize: 10, list: ['很多数据'], }; }, methods: { loadList2() { console.log('滚动到底部触发'); }, }, };

ydcss commented 6 years ago

你好，请尝试查看yd-infinitescroll父级元素，有没有高度不是100%的。

ydcss commented 6 years ago

或者是yd-layout 组件的父级包含了高度不是100%的元素，需手动将其高度设置为100%，否则页面将不能正常滚动。

ydcss commented 6 years ago

http://vue.ydui.org/docs/#/layout

gong135 commented 6 years ago

我没有使用您的 布局方式， 但是我的yd-infinitescroll 其上所有父级元素和祖级元素都都是有高度的！但是父级高度和自己高度一致。 后来我尝试父级高度变成看100vh也没有触发这个回调

ydcss commented 6 years ago

你的滚动容器是window还是其他哪个？何不发完整代码更好理解？

gong135 commented 6 years ago 
<template>
  <div>
    <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
      <xm-tab class="main-marin" :tabs="tablist" slot="list">
        <div slot="0" class='tab-content'>
          <div v-for="item in 100">{{item}}这是一个div占位</div>
        </div>
      </xm-tab>
      <!-- 数据全部加载完毕显示 -->
      <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>

      <!-- 加载中提示，不指定，将显示默认加载中图标 -->
      <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg" />

    </yd-infinitescroll>
  </div>
</template>
<script>
import xmTab from '../../components/tab/tab';

export default {
  data() {
    return {
      tablist: ['我供应', '我需求'],
    };
  },
  components: {
    xmTab,
  },
  methods: {
    loadList() {
      console.log(1);
    },
  },
};
</script>
<style>
.miantop {
  height: 100vh;
}
</style>

容器是window

gong135 commented 6 years ago

发全部 好像无法显示哟

gong135 commented 6 years ago

image

ydcss commented 6 years ago

qq 20171208135405

qq 20171208135333

你的代码运行正常。你是哪个版本的vue-ydui?

gong135 commented 6 years ago

image 嗯！ 我这边没有触发。 我觉得有可能是我布局的问题

ydcss commented 6 years ago

把项目托管到github上，帮你调试下。

gong135 commented 6 years ago

删除这部分代码了！ 自定义成分页了！ 等我修改下

gong135 commented 6 years ago

https://github.com/gong135/vue-yd.git

ydcss commented 6 years ago

恩，调试了好久，是样式设置问题。src\assets\style\index.less 中html和body不可以同时加超出隐藏的，只能加到body，不然滚动事件会没有响应的。例如：

<style>
    html, body {
        height: 100%;
        overflow-x: hidden;
    }
</style>

这样是滚动事件是没有响应的。

ydcss commented 6 years ago

你可以这样试试（不会有事件响应）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            height: 100%;
            overflow-x: hidden;
        }
    </style>
</head>
<body>
<div>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
    <h1>fdsfdsf</h1>
</div>
<script>
    !function () {
        window.addEventListener('scroll', function () {
            console.log('fsjdklfjkslajf');
        })
    }();
</script>
</body>
</html>
gong135 commented 6 years ago

谢谢

gong135 commented 6 years ago

老师您写的这个demo 有事件响应 image

ydcss commented 6 years ago

是的，我写的不严谨。你不要切换手机模式，就可以看清楚了。滚动最底或者最顶会有响应，是因为内部容器触发了body的滚动，但是实际上滚动不是这样的。

你加上这个样式就没事件响应了。

* {
    margin: 0;
    padding: 0;
}
ydcss commented 6 years ago

qq 20171208210933

ee07b577 commented 6 years ago

所以，使用infiniteScroll 都需要避免哪些坑？能不能更新到文档中，标注下注意事项？