一个可往上加载和滑动到底部的的vue模板组件

<template>
    <div id="noticeWrap">
        <div id="navheader">
            <p>回复我的</p>
            <div class="iconbar" @click="goBack"><</div>
        </div>      
        <div id="content" :class="{loaded:isMove}" :style="{marginTop:marginTop+'px'}"
            @touchstart="start($event)"
            @touchmove="move($event)"
            @touchend="end($event)"
        >
            <div class="line-scale-pulse-out-rapid" style="marginLeft:150.5px">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="takepartin">
                <div class="addInfoItem">
                        <div class="user">
                            <div class="userImgWrap">
                                <img src="@/static/images/default_user.png" width="30" alt="">
                            </div>
                            <div class="userSendInfo">
                                <div class="name">hello</div>
                                <div class="time">2018-2-2</div>
                            </div>
                            <div class="partOf">php</div>
                        </div>
                        <div class="content">
                            回复：wtf?
                        </div>
                        <div class="contentOf">
                            贴子：内容
                        </div>
                        <div class="sendNum">
                            100&nbsp;<img src="@/static/images/say.png" width="13" alt="">
                        </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    data(){
        return{
            isMove: true, 
            startY:0,//触摸事件起始点横坐标
            moveY:0,//触摸点Y坐标
            m_sY:0,//横向滑动距离值
            isMove:false,//缓冲动画flag
            marginTop:-36,
            contentVal:0,//内容区的滚动值，如果大于零，不会出现向上滚动，防止肉容区的正常触摸滚动被上层加载事件鉴听到
        }
    },
    computed:{

    },
    activated(){
        var viwePortHeight=this.$store.getters.itemHeight
        $('#content').css('height',viwePortHeight+25);
        this.scroll(viwePortHeight);
    },
    methods:{
        scroll(viwePortHeight,allHeight){
            $('#content').scroll(()=>{
                let scrollTop=$('#content').scrollTop()
                var allHeight=$('#content')[0].scrollHeight
                //this.$store.commit('setItemScroll',{index:1,scrollTopVal:scrollTop})
                this.contentVal=scrollTOp//把滚动值设给
                if(viwePortHeight+scrollTop>=allHeight-35){
                    console.log('到底部了')
                }
            });
        },
        start(ev){
            this.isMove = false;
            this.startY = ev.changedTouches[0].clientY;
            this.sML = this.marginTop;

        },
        move(ev){
            this.moveY=ev.changedTouches[0].clientY;
            this.m_sY=this.moveY-this.startY;
            if($(window).scrollTop()===0&&this.m_sY>25&&this.contentVal==0){
                this.marginTop=(this.m_sY/1.5)-37;              
            }
        },
        end(ev){
            this.isMove=true;
            this.marginTop=-36
        },
        goBack(){
            this.$router.goBack()
        }
    }
}
</script>
<style lang="less" scoped>
    #navheader{
        width: 360px;
        height:45px;
        line-height: 45px;
        font-size:25px;
        position: fixed;
        background: #fff;
        z-index: 10;
        box-shadow: 0px 1px 1px lightblue;
        text-align: center;
        .iconbar{ position: absolute;
            width: 30px;
            height: 20px;
            line-height: 22px;
            border-radius: 25px;
            text-align: center;
            background: lightblue;
            color: #fff;
            font-size: 20px;
            padding:3px;
            top:9px;
            left: 10px;
            font-weight: bold;
        }
    }
    #content{
        position: fixed;
        width: 360px;
        overflow: auto;
        top:45px;
        .takepartin,.myEstablish{ padding: 5px;
                .addInfoItem{ min-height: 75px;
                    padding:5px;
                    background: #fffffa;
                    border: 1.4px solid #f5f5f5;
                    border-radius: 5px;
                    margin-bottom: 7px;
                    font-size: 15px;
                    line-height: 17px;
                    text-align: left;
                    position: relative;
                    .user{ &:after{ content: "";
                            clear: both;
                            display: block;
                        }
                        zoom:1;
                        .userImgWrap{
                            float: left;
                            width: 30px;
                            border-radius: 7px;
                            border:1px dashed #ccc;
                            margin-right: 10px;
                            overflow: hidden;
                            height: 30px;
                        }
                        .userSendInfo{
                            float: left;
                            line-height: 17px;
                            font-size: 17px;
                            .time{ font-size: 13px;
                                color: grey;
                            }
                        }
                        .partOf{
                            float: right;
                            margin-right: 15px;
                            color:#a0c7c0;
                            font-size: 19px;
                            font-weight: bold;
                        }
                    }
                    .contentOfAttach{
                        width: 80%;
                        background: #ccc;
                        padding: 2px;
                        border-radius: 5px;
                        margin-bottom: 2px;
                    }
                    .contentOf{
                        background: #dde8e7;
                        padding: 2px;
                        padding: 2px;
                        border-radius: 5px;
                    }
                    .sendNum{
                        font-size: 10px;
                        position: absolute;
                        right: 14px;
                        top: 40px;
                        color: grey;
                        img{ position: relative;
                            bottom:-1px;
                        }
                    }
                }
            }
    }
      //loading
     @keyframes line-scale-pulse-out-rapid {
  0% {
            transform: scaley(1); }

  80% {
            transform: scaley(0.3); }

  90% {
            transform: scaley(1); } }

            .line-scale-pulse-out-rapid > div {
  background-color: #42b5bc;
  width: 3px;
  height: 30px;
  border-radius: 2px;
  margin: 2px;
          animation-fill-mode: both;
  display: inline-block;
          animation: line-scale-pulse-out-rapid 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78); }
.line-scale-pulse-out-rapid > div:nth-child(2), .line-scale-pulse-out-rapid > div:nth-child(4) {
            animation-delay: 0.25s !important; }
  .line-scale-pulse-out-rapid > div:nth-child(1), .line-scale-pulse-out-rapid > div:nth-child(5) {
            animation-delay: 0.5s !important; }
    .loaded{
        transition-property: margin-top;
        transition-duration: 0.3s;
    }
</style>

vuex中的值是页面的内容高度

var h=window.screen.height;
        //item容器高度
this.$store.commit('setItemHeight',h-this.othorHeight-20)

得到页面高度然后减掉导航的高度进行计算得到的