一个可往上加载和滑动到底部的的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 <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)

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