上拉加载无上拉效果，也不会触发方法

[74sharlock]

<template>
    <div class="page health-tips">
        <common-header></common-header>
        <section class="no-footer">
            <load-more :bottom-method="loadBottom" :bottom-status.sync="bottomStatus" :bottom-distance="distance" :auto-fill="autoFill">
                <div>
                    <div class="text-img-card" v-for="tip in tips" v-link="{path: '/' + $route.pageData.modelName + '/' + $index+ '/' + tip.id}" track-by="$index">
                        <div class="image" v-if="tip.image"><img :src="tip.image"></div>
                        <div class="title">{{tip.title}}</div>
                        <p class="content">{{{tip.content}}}</p>
                    </div>
                </div>
            </load-more>
            <toast type="loading" v-show="loadingData">数据加载中</toast>
        </section>
    </div>
</template>
<style lang="less" rel="stylesheet/less" scoped>
    @import '../assets/var';
    section {
        padding: 36/@rem 36/@rem 50px 36/@rem;
        background: #f6f6f6;
    }
    .text-img-card {
        padding: 20/@rem;
        .boxShadowForBlock;
        background-color: #fff;
        margin-bottom: 20/@rem;
        border-radius: 6px;
        .image {
            width: 100%;
            img {
                width: 100%;
            }
        }
        .title {
            height: 70/@rem;
            display: flex;
            align-items: center;
            font-size: 30/@rem;
        }
        .content {
            font-size: 24/@rem;
            color: #999;
        }
    }

</style>
<script>
    import loadMore from 'mint-loadmore'
    import commonHeader from './header'
    import toast from './toast'
    import store from './store/health-tips'

    let getType = function (o) {
        return ({}).toString.call(o).replace(/\[object\s(.*)\]/, '$1').toLowerCase();
    };

    //todo:加载更多

    export default{
        data(){
            let self = this;
            return {
                loadingData: false,
                tips: [],
                currentPage: 1,
                lastPage: 1,
                total:1,
                distance: 120,
                bottomStatus: '',
                autoFill: false,
                queryType:(function (me) {
                    let type = 0;
                    switch (me.$route.pageData.modelName){
                        case 'medical_guide':
                            type = 1;
                            break;
                        case 'health_tips':
                            type = 2;
                            break;
                    }
                    return type;
                })(self)
            }
        },
        components:{
            commonHeader,
            toast,
            loadMore
        },
        methods:{
            loadBottom(id){
                this.$resource(`/api/article?type=${this.queryType}&page=${this.nextPage}`).query().then(function (res) {
                    store.tips = res.data;
                    this.currentPage = store.tips.current_page;
                    this.lastPage = store.tips.last_page;
                    this.total = store.tips.total;
                    let l = store.tips.data.length, i = 0;
                    for(; i < l; i++){
                        this.tips.push(store.tips.data[i]);
                    }
                    this.$broadcast('onBottomLoaded', id);
                });
            },
            a(){
                console.log(1);
            }
        },
        route: {
            data (transition){
                this.loadingData = true;
                this.$resource(`/api/article?type=${this.queryType}&page=${this.currentPage}`).query().then(function (res) {
                    this.loadingData = false;
                    store.tips = res.data;
                    transition.next({
                        tips: store.tips.data,
                        currentPage: store.tips.current_page,
                        lastPage: store.tips.last_page,
                        total: store.tips.total
                    });
                });
            }
        }
    }
</script>

[Leopoldthecoder]

@74sharlock demo 页在手机上也不能上拉？

[74sharlock]

@Leopoldthecoder demo页打不开 可能需要翻墙 我正在找解决办法 测试demo页 同时看看源码

[2016-06-13 18:24:06] demo页可以上拉！已经测试过了。

[Leopoldthecoder]

<template>
  <div class="page health-tips">
    <section class="no-footer">
      <mt-loadmore :bottom-method="loadBottom" :bottom-status.sync="bottomStatus" :bottom-distance="distance" :auto-fill="autoFill">
        <div>
          <div class="text-img-card" v-for="tip in tips" track-by="$index">
            <div class="image" v-if="tip.image"><img :src="tip.image"></div>
            <p class="content">{{{tip}}}</p>
          </div>
        </div>
      </mt-loadmore>
    </section>
  </div>
</template>

<style>
  section {
    padding: 10px;
    background: #f6f6f6;
  }
  .text-img-card {
    padding: 10px;
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 6px;
    .image {
      width: 100%;
      img {
        width: 100%;
      }
    }
    .title {
      height: 35px;
      display: flex;
      align-items: center;
      font-size: 14px;
    }
    .content {
      font-size: 14px;
      color: #999;
    }
  }
</style>

<script type="text/babel">
  export default {
    data() {
      return {
        loadingData: false,
        tips: [],
        currentPage: 1,
        lastPage: 1,
        total: 1,
        distance: 120,
        bottomStatus: '',
        autoFill: false
      };
    },
    methods: {
      loadBottom(id) {
        setTimeout(() => {
          for (let i = 1; i <= 10; i++) {
            this.tips.push(i);
          }
          this.$broadcast('onBottomLoaded', id);
        }, 1500);
      }
    },
    route: {
      data(transition) {
        setTimeout(() => {
          transition.next({
            tips: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
          });
        }, 1500);
      }
    }
  };
</script>

我试着用你贴出来的代码测试，只是删除了不相关的组件，以及改了调用接口的一些地方，route 的 data 和 loadBottom 仍然保持异步。在电脑和手机上都没问题😂，或者你用这份代码试试？

[74sharlock]

@Leopoldthecoder 十分感激！我再测试下吧。

[74sharlock]

@Leopoldthecoder 测了又测，一开始还是各种不行，后来我把总体样式去掉了。重新测试可以了。肯定是我的样式影响了插件。虽然没有找到具体原因但是终于有了方向。谢谢帮忙！接下来我逐步排查样式。等我找到原因再来回复。

[Leopoldthecoder]

@74sharlock 辛苦了

[74sharlock]

这边初步排查的结果是，如果loadmore或者loadmore父容器有个padding-bottom的话，上拉就会失效，我在demo页试了一下好像也是。

[74sharlock]

<template>
    <div class="page health-tips">
        <common-header></common-header>
        <load-more :bottom-method="loadBottom" :bottom-status.sync="bottomStatus" :bottom-distance="distance" :auto-fill="autoFill">
        <section class="no-footer">

                <div>
                    <div class="text-img-card" v-for="tip in tips" v-link="{path: '/' + $route.pageData.modelName + '/' + $index+ '/' + tip.id}" track-by="$index">
                        <div class="image" v-if="tip.image"><img :src="tip.image"></div>
                        <div class="title">{{tip.title}}</div>
                        <p class="content">{{{tip.content}}}</p>
                    </div>
                </div>

            <toast type="loading" v-show="loadingData">数据加载中</toast>
        </section>
        </load-more>
    </div>
</template>

我把模板修改了一下，把loadmore作为section的父容器，然后一切都好了。 问题成功解决。 虽然还是不清楚具体原因。

[Leopoldthecoder]

OK，padding-bottom 的问题我看看能不能修好

[74sharlock]

@Leopoldthecoder 你自己测试下，看看是不是因为padding-bottom的问题。我这边也不太肯定。我先关了issue。有需要帮忙的话再叫我。

[74sharlock]

@Leopoldthecoder 上下拉取现在都已经正常了，完成了好几个需要拉取数据的功能，特意来赞下。👍

[Leopoldthecoder]

@74sharlock 谢谢。升到了 0.1.2 版，应该解决了 loadmore 父容器有 padding-bottom 时上拉失效的问题，你可以试试看。不过 loadmore 本身还是不要有 padding-bottom，否则滚动到底的时候“上拉加载”几个字就会露出来。

[74sharlock]

@Leopoldthecoder 是的，我发现了。我现在尽量避免这种情况。如果确实需要padding-bottom，我就想办法调整结构尽量加到祖先元素中去。 另外，使用vue-cli, 开发环境时可以把组件源码复制过来去掉style样式，引用index.css，然后引用这个组件，就可以在浏览器里面debug了。这样很有助于找到问题。npm安装的包里面只有一个build完成的js。

[74sharlock]

@Leopoldthecoder 原来0.1.2版可以直接引用源码了！这样就可以直接debug了啊！👍 不过样式部分貌似需要装一个loader。这是什么，scss？ ［5分钟后］这还是less。 ［6分钟后］这真的是less吗。less－loader编译出错

[Leopoldthecoder]

样式是用我们自己的一套基于 postCSS 的插件库（salad）写的