是不是一旦使用了定位，然後下拉元件就有bug

<template>
    <p class="view1">
        <section class="home-head">
            <p class="sub-head">
                <h3 class="talk-title">GaGaTalk</h3>
                <!-- <p class="title-right">
                    <span class="choice-text">筛选</span>
                    <span class="choice-bg"></span>
                </p> -->
            </p>
            <nav>
                <ul>
                    <li>
                        <a @click="tabClick(0)" :class="classArr[0]?'active':''" class="nav-title nav-main" href="javacript:void(0)">全部</a>
                        <span></span>
                    </li>
                    <li v-for="(item, index) in tabList">
                        <a @click="tabClick(item.label_id)" :class="classArr[item.label_id]?'active':''" class="nav-title" href="javacript:void(0)">{{item.label_name}}</a>
                        <span></span>
                    </li>
                </ul>
            </nav>
        </section>
        <section class="main">
            <scroller 
                delegate-id="myScroller"
                  :on-refresh="onRefresh"
                  :on-infinite="onInfinite"
                  ref="my_scroller">
                  <p class="t-list" v-for="item in teacherListInfoArr">
                    <dl>
                        <dt class="fl">
                            <img @click="lookTeacherDetail(item.teacher_id)" v-bind:src=item.teacher_img alt="teacher-avatar">
                            <!-- <span class="online">在线</span> -->
                        </dt>
                        <dd class="fr re">
                            <p class="m1 re">
                                <span class="ab m1-name">{{item.teacher_cname}}</span>
                                <span class="ab m1-sex" v-bind:class="[item.teacher_sex=='F'?'sex-man':'sex-woman']">{{item.teacher_sex=='F'?'男':'女'}}</span>
                                <img class="ab m1-nation" src="../../../assets/pic/regen/u28.png" alt="">
                            </p>
                            <p class="m2 re">
                                <p class="fl m2-grade">
                                    <img v-for="item2 in item.teacher_score" src="../../../assets/pic/regen/u532.png" alt="">
                                </p>
                                <p class="fl m2-char">
                                    <span class="m2-subchar1">{{item.labelList[0].label_name}}</span>
                                    <span class="m2-subchar2" v-if="item.labelList[1]">{{item.labelList[1].label_name}}</span>
                                    <span class="m2-subchar3" v-if="item.labelList[2]">{{item.labelList[2].label_name}}</span>
                                </p>
                            </p>
                            <p class="m3">
                                {{item.teacher_info}}
                            </p>
                            <p class="m4 re">
                                <span class="m4-price"><i>{{item.teacher_price}}</i>$/分钟</span>
                                <span class="m4-order">立即预约</span>
                            </p>
                        </dd>
                    </dl>
                </p>
            </scroller>
                
            
        </section>
    </p>
</template>
<script>
import $ from 'jquery'
import API from '../../../assets/model/api.js'
export default {
    components: {
          
    },
    data() {
        return {
            tabList: [],//tab列表数据
            teacherListInfoArr:[],//教师列表数据
            teacherParams: {//教师列表 参数
                pageNo: 1,
                pageSize: 5,
                Label_id: 0
            },
            classArr: [true,false,false,false,false],
            teacherList: [{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7},{id:8},{id:9},{id:10}],
            snapping: false
        }
    },
    mounted() {
        setTimeout(() => {
            $('.main').height($(window).height()-$('.home-head').height());
        },0)

        localStorage.setItem('userInfo','{"tid": "91b9750b6a074cc38d6c00c55631224b","token": "1a034cc7593211e5b98b00163e000b7c","os": "Android/5.1.1","usingVersion": "26","visitGagaId": "1a034cc7593211e5b98b00163e000b7c","gagaId": "1a034cc7593211e5b98b00163e000b7c","method": "gagaLiveMainLabelList","userAgent": "Mozilla/5.0 (Linux; U; Android 5.1.1; zh-cn; vivo X7 Build/LMY47V) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1","remortIP": "123.161.210.67"}')
        this.getTabList();
        this.getTeachList();
    },
    methods: {
        // 获取标题列表
        getTabList() {
            this.$http.post(API.gagaLiveMainLabelList, {
                "method": "gagaLiveMainLabelList",
                "remortIP": "123.161.210.67"
            }).then((response) => {
                if(response.status === 200) {
                    const tabObj = response.body;
                    if(tabObj.code === 200) {
                        this.tabList = tabObj.list;
                    }
                }
            })
        },
        // 获取教师列表
        getTeachList() {
            this.$http.post('/api/gagaTalkServer/commonService/gagaLiveTeachList', this.teacherParams).then((response)=> {
                if(response.body.code === 200) {
                    const teacherListInfo = response.body;
                    if(teacherListInfo.code === 200) {
                        this.teacherListInfoArr = teacherListInfo.list;
                        // this.$refs.loadmore.onTopLoaded(this.loadMoreId);
                        // this.$refs.loadmore.onBottomLoaded(this.loadMoreId);
                    }
                }
            })
        },
        //标题切换
        tabClick(label_id) {
            this.teacherParams.pageNo = 1;
            for(let i=0;i<this.classArr.length;i++) {
                this.classArr[i] = false;
            }
            this.classArr[label_id] = true;
            this.teacherParams.Label_id = label_id;
            this.teacherParams.pageSize = 5;
            this.getTeachList();
        },
        // 立即预约
        lookTeacherDetail(id) {
            this.$router.push({path: '/detail', query: {id: id}});
        },    
        // 下拉刷新
        onRefresh(done) {
            setTimeout(() => {
                   console.log(111);
              done(false);
            }, 1500)
        },
        onInfinite(done) {
            console.log(this.$refs.my_scroller)
            setTimeout(() => {
                console.log(222);
                this.$refs.my_scroller.finishInfinite(true)
              done(true)    
            }, 1500)
        }
        // loadTop(id) {
        //     this.loadMoreId = id;
        //     this.teacherParams.pageNo = 1;
        //     this.getTeachList(id);
        //     this.$refs.loadmore.topPullText = '下拉刷新↓'
        // },
        // 加载更多
   //      loadBottom(id) {
            // this.loadMoreId = id;
            // this.$refs.loadmore.bottomPullText = '上拉刷新↑';
            // this.teacherParams.pageNo += 1;
            // this.teacherParams.pageSize+=5;
            // // this.getTeachList();
            // // setTimeout(function() {
            // //     self.teacherList.push({})
            // //     if(self.$refs.loadmore) {
            // //         self.$refs.loadmore.onBottomLoaded(id);
            // //     }
            // // }, 2000)
            // this.$http.post('/api/gagaTalkServer/commonService/gagaLiveTeachList', this.teacherParams).then((response)=> {
   //              if(response.body.code === 200) {
   //                  const teacherListInfo = response.body;
   //                  if(teacherListInfo.code === 200) {
   //                      this.teacherListInfoArr = this.teacherListInfoArr.concat(teacherListInfo.list);
   //                      this.$refs.loadmore.onBottomLoaded(this.loadMoreId);
   //                  }
   //              }
   //          })
   //      }


    }
}
</script>

<style scoped>
    /*-----------------子头部-------------------*/
    .home-head{
        position: relative;
        left: 0;
        top: 0;
        height: 1.96rem;
        background-color: #f5f5f5;
        z-index: 99999;
    }
    .sub-head{
        width: 7.5rem;
        height: .88rem;
        background-color: #3f79df;
    }
    .talk-title{
        text-align: center;
        height: .88rem;
        line-height: .88rem;
        font-size: .3rem;
        color: #fffefe;
    }
    .title-right{
        position: absolute;
        right: .2rem;
        top: .3rem;
        width: .98rem;
    }
    .choice-text{
        float: left;
        font-size: .28rem;
        color: #fffefe;
        height: .28rem;
        line-height: .28rem;
        letter-spacing: .02rem;
    }
    
    .choice-bg{
        float: right;
        width: .28rem;
        height: .28rem;
        background: url('../../../assets/pic/home/home-choice.png') no-repeat 0 0;
        background-size: cover;
        position: relative;
        top: .02rem;
    }
    /*-------------------导航------------------*/
    nav{
        width: 7.5rem;
        height: .88rem;
        line-height: .88rem;
        background-color: #ffffff;
    }
    nav ul{
        width: 7.5rem;
        overflow-x: scroll;
        height: .88rem;
        white-space:nowrap;
    }
    nav li{
        /*float: left;*/
        display: inline-block;
    }
    .nav-title{
        width: 1.18rem;
        height: .88rem;
        text-align: center;
        display: block;
        margin-left: .72rem;
        font-size: .26rem;
        color: #333333;
    }
    .nav-main{
        margin-left: .44rem;
        width: .9rem;
    }
    .active{
        color: #3f79df;
        border-bottom: 3px solid #3f79df;
    }
    /*-------------------主体---------------------*/
    .main{
        width: 7.5rem;
        position: absolute;
        top: 1.96rem;
        background: #f5f5f5;
        overflow: auto;
    }
    .main>ul{
        overflow: auto;
    }
    .t-list{
        position: relative;
        float: left;
        width: 7.5rem;
        height: 3.6rem;
        background: #fff;
        margin-bottom: .2rem;
        list-style: none;
    }
    dt{
        position: relative;
        width: 1.8rem;
    }
    dt img{
        position: absolute;
        left: .2rem;
        top: .2rem;
        width: 1.4rem;
        height: 1.4rem;
        border-radius: 50%;
    }
    dt span{
        position: absolute;
        left: .50rem;
        top: 1.8rem;
        width: .8rem;
        height: .32rem;
        text-align: center;
        border-radius: 5px;
        line-height: .32rem;
        font-size: .24rem;
    }
    .online{
        border: 1px solid #64c800;
        background: #f7fef0;
        color: #64c800;
    }
    .offline{
        border: 1px solid #999999;
        background: #f5f5f5;
        color: #999999;
    }
    dd{
        width: 5.7rem;
    }
    .m1{
        height: .87rem;
    }
    .m1-name{
        width: 1.3rem;
        font-size: .3rem;
        color: #202020;
        left: 0;
        top: .39rem;
    }
    .m1-sex{
        left: 1.14rem;
        top: .39rem;
        font-size: .2rem;
        width: .6rem;
        height: .32rem;
        line-height: .32rem;
        border-radius: 7px;
        text-indent: 15px;
        color: #ffffff;
    }
    .sex-woman{
        background: #f087c7 url(../../../assets/pic/home/woman.png) no-repeat .13rem .06rem;
    }
    .sex-man{
        background: #84acf3 url(../../../assets/pic/home/man.png) no-repeat .11rem .06rem;
    }

    .m1-nation{
        left: 1.93rem;
        top: .35rem;
        width: .48rem;
        height: .42rem;
        border-radius: 3px;
    }
    .m2{
        height: .50rem;

    }
    .m2-grade{
        width: 1.7rem;
    }
    .m2-grade img{
        float: left;
        margin-top: .14rem;
        width: .26rem;
        height: .25rem;
    }
    .m2-char span{
        font-size: .26rem;
        margin-left: .20rem;
        line-height: .50rem;
    }
    .m2-subchar1{
        color: #6ea0f0;
    }
    .m2-subchar2{
        color: #faaa5a;
    }
    .m2-subchar3{
        color: #72cc26;
    }
    .m3{
        padding-top: .13rem;
        height: 1.13rem;
        font-size: .26rem;
        color: #696969;
        line-height: .44rem;
        border-bottom: 1px solid #dcdcdc;
    }
    .m4{
        height: 1.09rem;
    }
    .m4-price{
        float: left;
        font-size: .26rem;
        color: #999999;
        line-height: 1.09rem;
    }
    .m4-order{
        width: 2rem;
        height: .7rem;
        border-radius: .35rem;
        float: right;
        font-size: .28rem;
        background: #3f79df;
        color: #ffffff;
        line-height: .7rem;
        margin: .2rem .3rem 0 0;
        text-align: center;
        letter-spacing: .05rem;
    }
</style>"