stackjie / vue-pull-to Goto Github PK

为什么滑动的时候会覆盖上面的div呢？

1、上拉刷新的时候，希望满足一定的阈值情况下，才会触发该事件，群友推荐下该组件，发现挺精简的。然而不可避免的发现一个我本想避免的问题。发现在滑动组件超过满屏高度下，不在顶部pull down，而是在滑动组件内部去下拉，发现会触发该下拉事件，这显然不太理想，下拉的时候。

下拉滚动条，然后立刻上拉，不会触发刷新加载更多的事件，上面是空白的

参考当前代码中的处理逻辑、必须当页面滚动到底部的时候才能出发infinite-scroll对应的加载方法、希望能能够添加控制参数、是得触发距离可以控制。

在我的页面中用不到下拉刷新，然后在页面往下滑动的时候，会触发下拉回弹。这样就会导致页面无法正常的下拉。

拖动无法看到全部内容，拖一半又弹回去了

浏览器：Chrome 61
系统：Mac 10.12

比如说我改变一个接口的参数,不刷新当前页面的情况下,重置一下,这个组件的数据

我看了一下文档也没有讲这么实现，我也看了案例是require('./assets/icon/iconfont')需要引入这个，我也试着在本地引入但是 因为我项目是有语法检查的 iconfont.js文件 过不了

所有功能正常 但是页面底部状态显示不出来 后台代码其实是有的 是不是哪里没设置好？ 请教各位

代码如下：

   <section class="list-wrapper">
      <vue-pull
      :top-block-height="200"
      :bottom-block-height="200"
      :top-config="{stayDistance: 200, triggerDistance: 150}"
      :bottom-config="{stayDistance: 200, triggerDistance: 150}"
      :top-load-method="refresh"
      :bottom-load-method="loadmore"
      @scroll="scroll">
        <!-- 上面加载块 -->
        <template slot="top-block" scope="props">
          <div class="top-load-wrapper" :class="{trigger: props.state === 'trigger', 'loading': props.state === 'loading'}">
            <i class="iconfont" :class="{
            'icon-xialashuaxin': props.state === 'pull'|| props.state === 'trigger',
            'icon-loading': props.state === 'loading',
            'icon-iconfinished': props.state === 'loaded-done'
            }"></i>
            <span>{{props.stateText}}</span>
          </div>
        </template>
        <!-- scroll -->
        <ul class="list" v-if="newsList.length">
          <li class="list-item" v-for="(item, index) in newsList" :key="index">
            <a :href="item.detail" class="list-item-wrapper">
              <div class="info">
                <span class="title">【{{item.newssign}}】</span>
                <p class="desc">{{item.newstitle}}</p>
              </div>
              <time>{{item.datatime.slice(0,9)}}</time>
            </a>
          </li>
        </ul>
        <div class="loading-wrapper" v-else-if="!newsList.length && isLoading">
          <loading />
        </div>
        <div class="no-data-wrapper" v-else>
          <no-data />
        </div>
        <!-- 下面加载块 -->
         <template slot="bottom-block" scope="props">
           <div class="top-load-wrapper" :class="{trigger: props.state === 'trigger', 'loading': props.state === 'loading'}" v-if="hasMore">
             <i class="iconfont" :class="{
             'icon-xialashuaxin': props.state === 'pull'|| props.state === 'trigger',
             'icon-loading': props.state === 'loading',
             'icon-iconfinished': props.state === 'loaded-done'
             }"></i>
             <span>{{props.stateText}}</span>
           </div>
           <div class="no-more" v-else>没有更多数据了...</div>
         </template>
      </vue-pull>
    </section>

你好,你的vue-pull-to简单实用,但是我遇到了问题. 在线下用一切正常, 但是用webpack打包后线上环境bottom-load-method和top-load-method事件都没有触发,

div.vue-pull-to-wrapper 出现scroll 事件就会把action-block 露出来，例如ios safari 上input focus，网页有可能自动会scroll 一下。

现在需要实现 进入页面 自动下拉刷新一次

vendor.js:2720 TypeError: Cannot read property 'state' of undefined

会反弹到当前页面位置

can i change the top-config or bottom-config props dynamically?

你好，用了vux里面的swiper组件，然后嵌套了您的这个组件，发现会阻止外层swiper组件的滑动事件，不知道该怎么处理。希望得到您的帮助，谢谢

安卓下，上拉加载 会出现拉不上去的问题。直接不发上拉。 这个是怎么回事 ios 不会有这个问题

比如我用了vux swiper ，向左右滑动的时候，很容易触发pull的上下滑动，这就很不美观了。我在
distanceStart: {
type: Number,
default: 0
},

handleTouchMove: function handleTouchMove(event) {
this.currentY = event.touches[0].clientY;
this.distance = (this.currentY - this.startY) / this.distanceIndex + this.beforeDiff;
//todo: 修改触发下拉距离 ,手机端app（ios）无效
if(this.distance<this.distanceStart)
return
加了一句判断，电脑端浏览器模拟手机有效，但是打包到ios app测试就出错了。本人js很菜，实在不知道怎么改了，只能求助了o(╥﹏╥)o

您好，是不是可以添加一个disabled prop来禁用组件呢？目前我有个项目就会有这个需求，只能通过设置下拉值来达到不触发更新，不过还是会有下拉效果，体验有点不好。。

fixed child work error
use position:absolute + top instead of translate3d in div class="vue-pull-to-wrapper" can resolve it.

more details in:
https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children/29495706

found and test in ios11.2.5 iphone6s plus

在移动端上下滑动的时候会触发top-load-method和bottom-load-method而无法将页面滚动到下面，这个是有地方设置吗？

上拉加载下拉刷新，iOS都没问题， 安卓下拉没问题 但是上拉加载没反应，写法和demo是一样的

如题！

Travel的内容很多很长，
用了 插件后只能查看第一屏，超出部分不能滚动查看了

首先 ，很棒的组件
对比了一下原生的onscroll 事件 和 组件提供的scroll事件，同时监听容器的scrollTop值，在响应速度上似乎有点差距
见下图 这是原生onscroll事件 缓慢的滑动 中间的console 打印scrollTop的值，可以看到每次都是1px的加上去

这是vue-pull-to的scroll 事件 缓慢的滑动后每次的最小插值都是2px 这就会导致在滚动事件上做一些监听动画会有明显的卡顿感

想知道怎样可以避免这个情况 ，或者作者能否指出 和原生onscroll做法的区别

自己在开发的时候想无法显示滚动条，如果用手机查看您的例子，滚动条也是不能正常显示的，请问这是bug吗？

可以设置滚动容器滚动的位置吗？比如说滚动到中间，或者顶部

vue.esm.js?a588:434 [Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"
warn @ vue.esm.js?a588:434
handleError @ vue.esm.js?a588:519
(anonymous) @ vue.esm.js?a588:657
nextTickHandler @ vue.esm.js?a588:602
Promise resolved (async)
timerFunc @ vue.esm.js?a588:617
queueNextTick @ vue.esm.js?a588:665
queueWatcher @ vue.esm.js?a588:2702
update @ vue.esm.js?a588:2838
notify @ vue.esm.js?a588:732
reactiveSetter @ vue.esm.js?a588:962
(anonymous) @ vue-router.esm.js?26e7:2349
(anonymous) @ vue-router.esm.js?26e7:2348
updateRoute @ vue-router.esm.js?26e7:1789
(anonymous) @ vue-router.esm.js?26e7:1667
(anonymous) @ vue-router.esm.js?26e7:1776
step @ vue-router.esm.js?26e7:1615
step @ vue-router.esm.js?26e7:1622
runQueue @ vue-router.esm.js?26e7:1626
(anonymous) @ vue-router.esm.js?26e7:1771
step @ vue-router.esm.js?26e7:1615
(anonymous) @ vue-router.esm.js?26e7:1619
(anonymous) @ vue-router.esm.js?26e7:1756
(anonymous) @ vue-router.esm.js?26e7:1948
(anonymous) @ vue-router.esm.js?26e7:2013
(anonymous) @ index.js?3672:187
Promise resolved (async)
component @ index.js?3672:186
(anonymous) @ vue-router.esm.js?26e7:1965
(anonymous) @ vue-router.esm.js?26e7:1992
(anonymous) @ vue-router.esm.js?26e7:1992
flatMapComponents @ vue-router.esm.js?26e7:1991
(anonymous) @ vue-router.esm.js?26e7:1930
iterator @ vue-router.esm.js?26e7:1735
step @ vue-router.esm.js?26e7:1618
step @ vue-router.esm.js?26e7:1622
runQueue @ vue-router.esm.js?26e7:1626
confirmTransition @ vue-router.esm.js?26e7:1764
transitionTo @ vue-router.esm.js?26e7:1666
init @ vue-router.esm.js?26e7:2335
beforeCreate @ vue-router.esm.js?26e7:495
callHook @ vue.esm.js?a588:2556
Vue._init @ vue.esm.js?a588:3996
Vue$3 @ vue.esm.js?a588:4095
(anonymous) @ main.js?1c90:19
(anonymous) @ app.js:1024
webpack_require @ app.js:691
fn @ app.js:110
(anonymous) @ app.js:1720
webpack_require @ app.js:691
(anonymous) @ app.js:791
(anonymous) @ app.js:794
vue.esm.js?a588:523 RangeError: Maximum call stack size exceeded
at resolveSlots (eval at (app.js:799), :2219:23)
at initRender (eval at (app.js:799), :3862:15)
at VueComponent.Vue._init (eval at (app.js:799), :3996:5)
at new VueComponent (eval at (app.js:799), :4170:12)
at createComponentInstanceForVnode (eval at (app.js:799), :3519:10)
at init (eval at (app.js:799), :3353:45)
at createComponent (eval at (app.js:799), :4902:9)
at createElm (eval at (app.js:799), :4845:9)
at createChildren (eval at (app.js:799), :4972:9)
at createElm (eval at (app.js:799), :4878:9)

如题，在下拉上拉的时候icon图标没有出来不知道什么原因

我直接拷贝你的iconfont有点大了，里面是不是还有除了示例的其它图标，可否分享线上iconfont的那几个示例的图标。

另外还是要赞几句，写的真不错，灵活，简单，bug少，功能全，github上很难找。

如果能加上 自定义 滚动条，并且 提供监控滚动回掉函数，就完美了。

如题啊，在chrome 调试都正常，发布出来 ，IOS手机 在微信的 webview下 就是不出现滚动条。。

我引用该组件后，发现pull-to标签内内容过多，touchmove时影响了我得原生滚动。

上下拉都是没问题的，当列表还有类似“左滑删除”及其它手势操作的时候，比如左滑，列表也会轻微下拉，体验有点不好，通过设置阙值来控制下拉速度，貌似下拉距离比较长，如果能有个内部手势判断就好了

这个库好久没有维护了 最近可能抽时间来解决一下issues整理一下代码 坑了好多人抱歉233，有什么意见直接在这留言🐶

咋没有 滚动事件呀,我想监听滚动,最好能监听到 scrollTop的值
类似这样的
pull-to(
class="detail-content",
@scroll="scroll",
v-if="house && info"
)

只是定义一个TOP_DEFAULT_CONFIG吗？需要在标签绑定吗？

import { fetchDataList } from 'api',
按照介绍，报错这个？

用fastclick时，在顶部再下拉，会触发点击事件，在底部上拉也会触发点击事件。

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
原生监听是这样子，内部监听如何监听

其中一个使用时候做到一半取消了会影响另一个，举一个例子，页面刚加载完成后，做一个下拉刷新，然后下拉到一定程度不刷新，在滑动回去，这时候在去做上拉加载更多的时候 初始的pullText 没有被渲染出来，经过第二阶段triggerText的时候才会出来文字，然后这个之后的上拉下拉功能就全都正常了

有想mint-ui 里面的那些方法吗

你好，横向滚动的事件给阻止了吗， vue-pull-to作为子元素时父元素的touch事件没有触发， 是怎么回事呢

发现了一个Bug,启用上拉加载更多时，在底部快速滑动会概率性出现页面空白。不好意思，不能提供截屏或录屏，您可以试试可以复现不。