滑动触发错误

[xieyuanbin1]

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

[stackjie]

你好上一下示例代码

[xieyuanbin1]

[xieyuanbin1]

鼠标滚动可以，但是滑动就不行，在手机上测试的时候只能滑动，结果就被阻止了，但是我看示例却是没有的，这是怎么回事？

[xieyuanbin1]

<template>
    <div class="main">
        <pull-to
                :bottom-load-method="infiniteHandler"
                :top-load-method="refreshTranList"
                @bottom-state-change="stateChange"
                :top-config="TOP_DEFAULT_CONFIG"
                :bottom-config="BOTTOM_DEFAULT_CONFIG"
                :top-block-height=30
                :bottom-block-height=30>

            <div class="lists" v-for="(tran, index) in formatTranInfos" :key="index">
                <div class="date">
                    <img src="../../assets/date.png">
                    <span v-text="Object.keys(tran)[0]"></span>
                </div>
                <div class="items" v-for="(item,itemIndex) in Object.values(tran)[0]" :key="itemIndex">
                    <div class="item">
                        <div class="description">
                            <div class="name" v-text="item.tranName"></div>
                            <div class="money"
                                 :class="item.tranAmt > 0 ? 'recorded' : 'out-of-account'"
                                 v-text="formatAmt(item.tranAmt)"></div>
                        </div>
                        <div class="status">
                            <div class="time" v-text="item.tranTime"></div>
                            <div class="display" v-text="formatTranStatus(item.tranStatus)"></div>
                        </div>
                    </div>

                </div>
            </div>

            <template slot="top-block" scope="propTop">
                <div class="top-load-wrapper">
                    <!--这里还可以添加动态图片-->
                    <span v-text="propTop.stateText"></span>
                </div>
            </template>
            <template slot="bottom-block" scope="propsBottom">
                <div class="bottom-load-wrapper">
                    <!--这里还可以添加动态图片-->
                    <span v-text="propsBottom.stateText"></span>
                </div>
            </template>

        </pull-to>

    </div>
</template>
<style scoped>
    .main:after{
        content: "";
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
        background: #F0F1F5;
    }
    .date{
        line-height: 0.4rem;
        padding: 0 0.2rem;
        background: #F0F1F5;
        font-size: 14px;
        color: #9DA4AE;
        letter-spacing: 0;
        display: flex;
        align-items: center;
    }
    .date img{
        width: 0.15rem;
        height: 0.138rem;
        margin-right: 5px;
    }

    .items{
        background: #fff;
    }
    .item{
        margin: 0.06rem 0.2rem;
        border-bottom: 1px solid #EEEEEE;
    }
    .description,.status{
        display: flex;
        justify-content: space-between;
        line-height: 0.26rem;
    }
    .description{
        font-size: 14px;
    }
    .status{
        font-size: 12px;
        color: #9DA4AE;
    }
    .name{
        color: #1E2E47;
        font-weight: bolder;
    }
    .recorded{
        color: #5EC5B2;
    }
    .out-of-account{
        color: #F4333C;
    }


    /*刷新组件样式*/
    .top-load-wrapper,.bottom-load-wrapper{
        position: relative;
        z-index: -1;
        text-align: center;
        font-size: 12px;
        line-height: 30px;
        color: #CBCED3;
    }
</style>
<script>

    import PullTo from 'vue-pull-to'

    export default {
        name: "bill",       //账单页面
        data() {
            return {
                page: 1,
                pageCnt: 1,
                url: "regularFin/queryAcctTran",
                tranInfos: [],  //交易列表
                TOP_DEFAULT_CONFIG: {
                    pullText: '下拉刷新',
                    triggerText: '释放可以刷新',
                    loadingText: '加载中,请稍后',
                    doneText: '加载成功',
                    failText: '加载失败',
                    loadedStayTime: 500,
                    stayDistance: 30,
                    triggerDistance: 30
                },
                BOTTOM_DEFAULT_CONFIG: {
                    pullText: '上滑继续加载',
                    triggerText: '释放更新',
                    loadingText: '加载中,请稍后',
                    doneText: '--我是有底线的--',
                    failText: '加载失败',
                    loadedStayTime: 500,
                    stayDistance: 30,
                    triggerDistance: 30
                }
            }
        },
        created(){
            //此页面为'账单'页面与 '收款记录' 为同一个页面
            //跳转页面的时候携带参数
            //t=1  账单页面(默认)
            //t=2  收款记录

            let t = !!this.$route.query.t ? this.$route.query.t : "1";
            document.title = t === "2" ? "收款记录" :"账单";

            this.url = t === "2" ? "qrCode/queryReceivable" :"regularFin/queryAcctTran";

        },
        beforeMount(){
            //调用接口获取数据
            let _this = this;
            this.$axios.post(this.url,{
                pageNo: 1
            }).then((response)=>{
                let data = response.data;

                _this.page++;
                _this.pageCnt = data.pageCnt;

                _this.tranInfos = data.tranInfos;

            })
        },
        computed: {
            formatTranInfos(){
                //格式化账单列表
                let dateList = [];

                //首先将数组中的年份提取出来
                let yearArr = this.tranInfos.map((item,index)=>{
                    return item.tranTime.substr(0,7);
                });
                let yearList = [...new Set(yearArr)];  //将所有的年月去重

                yearList.forEach((item)=>{
                    let dateObj = {};
                    let itemArr = [];
                    this.tranInfos.forEach((it)=>{
                        let date = it.tranTime.substr(0,7);

                        if(item === date){
                            itemArr.push(it)
                        }
                    });
                    dateObj[item] = itemArr;

                    dateList.push(dateObj)
                });
                return dateList;
            }
        },
        methods: {
            refreshTranList(loaded){
                //调用接口获取数据
                let _this = this;
                this.$axios.post(this.url,{
                    pageNo: 1
                }).then((response)=>{
                    //page重置为1 避免分页执行多次的时候之后 刷新第一页而page参数还停留在分页数据
                    _this.page = 1;
                    let data = response.data;

                    _this.page++;
                    _this.pageCnt = data.pageCnt;

                    _this.tranInfos = data.tranInfos;

                    //结束刷新
                    loaded("done");
                })
            },
            infiniteHandler(loaded){
                //调用接口获取数据
                let _this = this;
                this.$axios.post(this.url,{
                    pageNo: this.page
                }).then((response)=>{
                    let data = response.data;

                    if(_this.page < _this.pageCnt){
                        //
                        _this.page++;
                        _this.tranInfos = _this.tranInfos.concat(data.tranInfos);

                        this.BOTTOM_DEFAULT_CONFIG.doneText = this.BOTTOM_DEFAULT_CONFIG.pullText;
                        loaded("done");
                    } else {

                        this.BOTTOM_DEFAULT_CONFIG.doneText = "--我是有底线的--";
                        //结束刷新功能
                        loaded("done");
                    }
                });
            },
            stateChange(state){
                //刷新组件触控事件
//                if (state === 'loaded-done') {
//                    this.BOTTOM_DEFAULT_CONFIG.doneText = this.BOTTOM_DEFAULT_CONFIG.pullText;
//                }
            },
            formatAmt(amt){
                //将金额格式化 正数前面添加+
                return amt > 0 ? `+${amt}` : amt;
            },
            formatTranStatus(status){
                //返回格式化之后的交易状态
                switch (status) {
                    case "0":
                        return "交易中";
                    case "1":
                        return "交易成功";
                    case "2":
                        return "交易失败";
                }
            }
        },
        components: {
            PullTo
        }
    }
</script>

[stackjie]

有没有给你外部容器设置高度<div class="main"></div>,组件会默认占据百分之百的高度的，如果外部没有高度组件内部滚动容器也会没有高度就不会触发区域滚动了

[xieyuanbin1]

@stackjie thanks 明白了