常见兼容性问题：吸顶元素无法固定，会随着页面滚动抖动
解决方案：页面整体为弹性布局，中间加载部分自适应高度，总体结构为 顶部固定+内容+底部固定
注意整体弹性布局的时候如果要实现吸顶效果，必须将定位元素放到flex=1元素的外层，吸顶的元素需要用两个div，一个是正常显示的，一个是滚动到一定高度固定到顶部的
html:
<div class="wrap" id="wrapId">
<div class="isFixed" v-if="is_fixed">
<div class="topBar" id="fixedTopFixed" ref="topBar">
<div class="item" v-for="(item,index) in barList" >吸顶内容</div>
</div>
</div>
<div class="flexWrap" :class="is_fixed? 'wrapTop' : 'flex'">
<div class="myScroll" v-infinite-scroll="loadMore" infinite-scroll-throttle-delay="500" infinite-scroll-immediate-check="true" infinite-scroll-disabled="busy" infinite-scroll-distance="50">
<div class="flexContent">
<div class="top" ref="top">
<div class="banner"><img src="../../../assets/images/文件名/banner.jpg" alt="" srcset=""></div>
<div class="topBar" id="fixedTop" ref="topBar" v-show="!is_fixed">
<div class="item" v-for="(item,index) in barList" @click="tab(index,item)">
不吸顶时展示的内容
</div>
</div>
</div>
<div class="scrollContent" id="wrap-content" ref="contentH">
<div class="memberList" v-show="infoList.length>0" id="content">
<div class="myScroll" v-infinite-scroll="loadMore" infinite-scroll-throttle-delay="500" infinite-scroll-immediate-check="true" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<div class="memberItem" v-for="(item,index) in infoList">
加载内容
</div>
<div class="loading" v-if="loading">
<span id="load-text">{{loadText}}</span>
</div>
</div>
</div>
<div class="empty" v-show="noData">最新达成情况正在更新中...请稍后再来～</div>
</div>
</div>
</div>
</div>
<div class="footer">底部固定</div>
</div>
js:
data: {
return {
busy: false,
pageNum: 1,
pageSize: 10,
loading: false，
noData: false,
infoList: []
}
}
mounted() {
<!--监听滚动-->
that.$nextTick(() =>{
let scrollDOM = document.querySelector('.flexContent')
scrollDOM.addEventListener('scroll',that.handleScroll)
})
},
methods: {
handleScroll () {
let scrollDOM = document.querySelector('.flexContent')
let scrollTop = scrollDOM.scrollTop
<!--计算滚动高度-->
let clientHeight = document.documentElement.clientHeight
if (scrollTop >document.querySelector('.banner').offsetHeight) {
this.is_fixed = true
} else {
this.is_fixed = false
}
},
<!--//触发加载-->
loadMore() {
if(this.pageNum<this.pages) {
this.loading = true
this.pageNum+=1
this.busy = true
this.loadData(接口参数,this.pageNum)
}
},
//加载时触发的接口调用
loadData() {
api.XXX({},function(success,data,err){
if(success) {
if(data.status==200) {
//加载逻辑判断
if(data.body.list.length>0 &&pageNum>0){
that.infoList = that.infoList.concat(data.body.list)
that.loading = false
}
if(pageNum==data.body.pages || data.body.list<20) {
that.loading = true
that.loadText = '没有更多数据了'
}
if(pageNum==1 &&data.body.list.length==0) {
that.noData = true
that.infoList = []
}
}
}
})
}
}
css:
.isFixed {
width: 100%
height: 1rem
position: absolute
top: 0
left: 0
z-index: 100
}
.myScroll {
height: 100%
}
.wrap {
width: 7.5rem
margin: auto
height: 100%
overflow: hidden
display: flex
flex-direction: column
}
.flex {
flex: 1
}
.wrapTop {
padding-top:0.45rem
}
.flexWrap {
width: 100%
height: 100%
}
.flexContent {
width: 100%
height: 100%
display: flex
flex-direction: column
overflow: scroll
-webkit-overflow-scrolling: touch
}
.top {
.banner {
position: relative
img {
width: 100%
display: block
}
.month {
position: absolute
bottom: 0.33rem
left: 0.45rem
color: #fff
font-size: 0.45rem
}
}
}
.scrollContent {
width: 100%
background: #fff
flex: 1
-webkit-overflow-scrolling: touch
.memberList {
height: 100%
padding-top: 0.2rem
}
}
.footer {
position: fixed
bottom: 0
width:7.5rem
margin: auto
height:auto
background:rgba(0,0,0,.7)
}
第一种
/*** JavaScript脚本实现回到页面顶部示例
* @param acceleration 速度
* @param stime 时间间隔 (毫秒)
**/
function gotoTop(acceleration,stime) {
acceleration = acceleration || 0.1
stime = stime || 10
var x1 = 0
var y1 = 0
var x2 = 0
var y2 = 0
var x3 = 0
var y3 = 0
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0
y1 = document.documentElement.scrollTop || 0
}
if (document.body) {
x2 = document.body.scrollLeft || 0
y2 = document.body.scrollTop || 0
}
var x3 = window.scrollX || 0
var y3 = window.scrollY || 0
// 滚动条到页面顶部的水平距离
var x = Math.max(x1, Math.max(x2, x3))
// 滚动条到页面顶部的垂直距离
var y = Math.max(y1, Math.max(y2, y3))
// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
var speeding = 1 + acceleration
window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding))
// 如果距离不为零, 继续调用函数
if(x > 0 || y > 0) {
var run = "gotoTop(" + acceleration + ", " + stime + ")"
window.setTimeout(run, stime)
}
}
第二种
function pageScroll() {window.scrollBy(0,-10)
scrolldelay = setTimeout('pageScroll()',100)
}
/*
scrollBy() 方法可把内容滚动指定的像素数。
语法
scrollBy(xnum,ynum)
参数描述
xnum 必需。把文档向右滚动的像素数。
ynum 必需。把文档向下滚动的像素数。
8?
<a>本站已经运行<a id="days">0</a>天</a><script>
var s1 = '2015-08-24'//设置为你的建站时间
s1 = new Date(s1.replace(/-/g, "/"))
s2 = new Date()
var days = s2.getTime() - s1.getTime()
var number_of_days = parseInt(days / (1000 * 60 * 60 * 24))
document.getElementById('days').innerHTML = number_of_days
</script>
