因为是 APP 所有父容器要居中 有absolute属性 造成下拉刷新没效果

[qiansimin88]

因为容易要居中显示,所有父容器用了absolute,加了top:1rem的属性,(APP 的头尾占据了一定的位置), 然后下拉刷新就突然没效果了. 用了topDistance 自己了加了 值 还是没效果 而demo是文档流 不知道出了什么问题

[qiansimin88]

还有下拉刷新过后 经常返回看上面的数据 第一行就就只有一半了 并且拉不上去了

[Leopoldthecoder]

hi，我这里试了一下，没有重现这个问题，能提供一下完整的代码吗？谢谢。另外 https://github.com/mint-ui/mint-ui/issues/32 这里的问题最好也能提供一下代码。

[qiansimin88]

抱歉 其实是我自己写的问题 已经没事了 不过那个 topDistance 属性我是真不会用 谢谢你们的 VUE UI 组件写的真的不错 继续加油

[Leopoldthecoder]

谢谢鼓励~ topDistance 的意思是，下拉多少距离之后释放才会触发刷新。可能文档里写的不是很详细，不过等到 mint-ui 正式发布的时候会有中文的文档，请保持关注~

[74sharlock]

好想是遇到同样的问题了，上拉刷新可以的，但是下拉刷新没有效果
@qiansimin88 你是怎么解决的？

[Leopoldthecoder]

@74sharlock 请提供完整的代码或者 demo

[74sharlock]

@Leopoldthecoder http://leopoldthecoder.github.io/Demos/vue-loadmore/index.html demo下拉似乎也有问题
我用chrome浏览器开移动端模拟

[Leopoldthecoder]

@74sharlock Demo 页我这里没有问题，也是 chrome 浏览器开移动端模拟。请问你那里具体是什么问题？

[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">
                <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: '',
                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){
                if(this.currentPage !== this.lastPage){
                    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);
                    });
                }
            }
        },
        route: {
            data (transition){
                this.$resource(`/api/article?type=${this.queryType}&page=${this.currentPage}`).query().then(function (res) {
                    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>

以上是代码
不知道可以看出问题不能。

另：loadBottom方法一上来就触发了，导致请求了两次数据。

[74sharlock]

@Leopoldthecoder 具体的问题就是滚动到列表底部的时候，上拉效果无法触发。

[Leopoldthecoder]

@74sharlock OK，等下我看一下这段代码。先确认一下，是上拉刷新无法触发是吧？因为你上面是说“上拉刷新可以的，但是下拉刷新没有效果”

[74sharlock]

@Leopoldthecoder 是的。因为一个下拉刷新的组件我已经做完了，表示很好用。果断star了。然后接下来的上拉加载却卡住了。
demo在我这边chrome还是不行, 我去firefox试了下是可以的。

[Leopoldthecoder]

@74sharlock demo 的第一个例子是可以上拉刷新的，第二个例子没给 bottom-method 所以不可以上拉刷新

[74sharlock]

@Leopoldthecoder 我指的就是第一个例子。我看demo的代码了。第一个是允许上&&下拉刷新的。但是列表总量不超过40.到40之后会阻止上拉。第二个例子只允许下拉。

[74sharlock]

@Leopoldthecoder 新的发现：我把项目的url在ff下打开，也是可以下拉的。估计是我的chrome出了问题。我再看看吧。谢谢！

[2分钟之后]
火狐下也出了问题。 我还是去手机上实测一下好了。

[Leopoldthecoder]

@74sharlock 不客气，demo 在 chrome 里有问题确实比较奇怪。麻烦等下告知是不是 chrome 的问题~

[Leopoldthecoder]

@74sharlock 哦，刚才忘了说，关于“loadBottom方法一上来就触发了，导致请求了两次数据”的问题，是因为进入当前页面后，loadmore 会检测它的内容能否撑满容器，如果不能就会调用 bottom-method，直到容器被撑满。

[74sharlock]

@Leopoldthecoder 有没有api可以手动处理的。因为只通过高度来检测的话，不同的设备可能高度不太一致，另外有些业务可能上来就只允许几条数据，可能没法上来就撑满容器

[Leopoldthecoder]

@74sharlock 好的，马上加

[74sharlock]

@Leopoldthecoder 手机上测试了，也不行。现在不清楚到底是代码出问题，还是浏览器问题。手机上下拉刷新也是可以的。

[Leopoldthecoder]

@74sharlock 已经添加了控制是否自动撑满容器的 API。更新到 0.0.5 版本，然后把组件的 autoFill 设为 false，看看能不能解决。

[74sharlock]

@Leopoldthecoder good！

[74sharlock]

@Leopoldthecoder autoFill确实能够避免多次加载的问题。但是上拉加载的问题依然存在。无论chrome，ff，还是手机端。我去开个新的issue吧。