VUX中XImg组件最后一张图片无法显示

VUX官方XImg组件关键代码：

<div v-for="src in list" style="background-color:yellow;text-align:center;">
      <span style="font-size:20px;">Loading</span>
      <x-img :src="src" :webp-src="`${src}?type=webp`" @on-success="success" @on-error="error" class="ximg-demo" error-class="ximg-error" :offset="-100" container="#vux_view_box_body"></x-img>
    </div>

 

<script>
import { XImg } from 'vux'
export default {
  components: {
    XImg
  },
  methods: {
    success (src, ele) {
      console.log('success load', src)
      const span = ele.parentNode.querySelector('span')
      ele.parentNode.removeChild(span)
    },
    error (src, ele, msg) {
      console.log('error load', msg, src)
      const span = ele.parentNode.querySelector('span')
      span.innerText = 'load error'
    }
  },
  data () {
    return {
      list: [
        'https://o5omsejde.qnssl.com/demo/test1.jpg',
        'https://o5omsejde.qnssl.com/demo/test2.jpg',
        'https://o5omsejde.qnssl.com/demo/test0.jpg',
        'https://o5omsejde.qnssl.com/demo/test4.jpg',
        'https://o5omsejde.qnssl.com/demo/test5.jpg',
        'https://o5omsejde.qnssl.com/demo/test6.jpg',
        'https://o5omsejde.qnssl.com/demo/test7.jpg',
        'https://o5omsejde.qnssl.com/demo/test8.jpg'
      ]
    }
  }
}
</script>

VUX官方文档太过简单，也没有解释XImg原理是啥。

做项目过程中，发现一个问题，就是list图片数组里面最后一个图片怎么也加载不进来，图片地址也没问题，也没有报错。

控制台也没有打印最后一条的记录，怀疑是还没有触发。经测试发现它是根据屏幕滚动到底部才触发加载这个操作，所以判断最后一条图片数据没触发原因是页面底部高度不够，不足以让程序认为到底了。

然后在父级元素div上面加了一个padding-bottom，问题就解决了。

项目实例代码：

<card :header="{title: '商品详情' }" >
            <div slot="content" style="position: relative; padding-bottom: 50px; overflow: hidden">
              <p class="card-padding">商品描述</p>

              <div v-for="src in list" style="text-align:center; ">
                <span style="font-size:20px;">Loading</span>
                <x-img :src="src" :webp-src="`${src}?type=webp`" @on-success="success"  class="ximg-demo" error-class="ximg-error" :offset="-100" container="#vux_view_box_body"></x-img>
              </div>

            </div>
          </card>