在移动端使用滑动的时候，我滑到的当前位置的图片不能显示，需要额外添加事件才能触发使得图片显示；在pc端需要只有滚轮滚到的地方才显示图片，手机模式拖动也是当前位置不显示图片…… about vue-lazyload HOT 13 CLOSED

至今仍存在，滑动停止后，还需要在上下滑一下才显示。。

from vue-lazyload.

@zhaozhaobaiping 可以提供一下 移动端的系统和浏览器信息

from vue-lazyload.

Android和iOS都是，运行在微信浏览器里面

from vue-lazyload.

@zhaozhaobaiping 在线demo 是没有问题的，http://hilongjw.github.io/vue-lazyload/ ，可否看一下有没有相关报错 logs

from vue-lazyload.

如果报错还好，还能找到问题在呢。关键就是没有报错。主要是鼠标滚轮滚动的话没问题，滚到的地方就加载，关键是在手机上滑动到的地方不能加载，需要额外一个事件来触发，比如我给这个图加一个单击事件，那么附近的三张图片就会加载，不加事件就不加载，会不会是布局有局限呢

from vue-lazyload.

@zhaozhaobaiping 是元素内滚动的吗？

from vue-lazyload.

是的，项目是做点餐的。我在页面有一个一个tab页，其中有一个是菜品列表，列表里面有多个关于菜品的图片、价格、名字。
我这边上github比较慢，有没有邮箱之类的，我可以发一些截图之类的

from vue-lazyload.

@zhaozhaobaiping 尝试设置一下父元素

<ul id="container">
  <li v-for="img in list">
    <img v-lazy.container="img">
  </li> 
</ul>

<ul id="container">
  <li v-for="img in list">
    <div v-lazy:background-image.container="img"></div>
  </li> 
</ul>

from vue-lazyload.

 <div id="dish_wrapper">
        <ul id="container" @touchmove='computHeight($event)'>
          <li v-for="category in categories" class="js-dish">
            <div class="dish" v-for="dish in category.dishes">
              <div class="dish-picture"  v-lazy:background-image.container="dish.thumb">
              </div>
              <div class="dish-detail">
                <div class="flag">
                  <div class="flag-item">
                    ￥{{dish.price}}/份
                  </div>
                  <div class="flag-item">
                    <i class="sub"  @click='subDish(dish)' v-if='dish.quantity'></i>
                    <span  v-if='dish.quantity'>{{dish.quantity}}</span>
                    <i class="plus"  @click='plusDish(dish)'></i>
                  </div>
                </div>
                <p>{{dish.title}}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>

还是不行

from vue-lazyload.

<div id="dish_wrapper"> <ul id="container" @touchmove='computHeight($event)'> <li v-for="category in categories" class="js-dish" @click.stop='helpme'> <div class="dish" v-for="dish in category.dishes"> <div class="dish-picture" v-lazy:background-image.container="dish.thumb"> </div> </div> </li> </ul> </div>
我按照您说的在父元素上设置了 还是不行 麻烦您再看一下

from vue-lazyload.

@zhaozhaobaiping 你的id=container的元素是页面加载时立即绘制到body中的么？我看了vue-lazyload的源码，如果你的父元素延迟出现在页面中，是不会给它绑定scroll事件的，这样会导致滚动时不继续加载图片。

from vue-lazyload.

@mengchen129 之前没考虑到你说的这个场景，我会增加实例方法来主动添加对scroll el 的监听

from vue-lazyload.

至今仍存在，滑动停止后，还需要在上下滑一下才显示。。

确实在手机端滑动时候不显示图片，需要再次滑动才显示。在浏览器中用鼠标滚轮滑动无此问题

from vue-lazyload.