常见兼容性问题：吸顶元素无法固定，会随着页面滚动抖动
解决方案：页面整体为弹性布局，中间加载部分自适应高度，总体结构为 顶部固定+内容+底部固定
注意整体弹性布局的时候如果要实现吸顶效果，必须将定位元素放到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)
}
实现轮播图思路
布局：
1. 使用 flex 布局使子元素水平排列；
2. 子元素宽度设置100%，flex-shrink 设置为 0（这个属性保证子元素不被压缩）
定时器无缝轮播：
轮播之前需要将首尾各添加一张图片。其目的就是实现无缝轮播。
然后将父元素 left 向左移动一个屏幕宽度的距离。这样才能让第二张（因为首尾各添加了一张图片，所以原先的第一张就变成了第二张）变成可视范围的第一张。
轮播到最后一张图片（这里的最后一张指的是拼接的第一张）时；
①清除掉定时器；
②开启临界处理（重置父元素的left）；
③开启下一轮轮播。
这里是实现无缝轮播的关键；其目的是播放最后一张的同时，与第一张偷梁换柱。因为最后一张与第一张图片相同，所以快速地改变其 left 用户并无感知。并且同时开启下一轮定时器，1.5s 之后执行第二张图片播放。而这个 1.5s 之内就好了准备（清除当前定时器，重置父元素 left）。
右边按钮点击无缝轮播：
逻辑同定时器无缝轮播类似，因为方向都是从右向左播放。无缝轮播的核心都是播放到最后一张时偷梁换柱（播放最后一张图片的1.5s 同时，改变父元素 left 成初始值，负数的屏幕宽度）。
左边按钮点击无缝轮播：
左边按钮无缝轮播的核心与以上差不多，唯一的区别就是当播放到第一张图片时，开始偷梁换柱（播放第一张图片的1.5s 同时，改变父元素 left 成最大值，负数的（屏幕宽度*（子元素个数-2）））。
指示灯点击无缝轮播：
点击第一张图片时，同左边按钮点击无缝轮播。点击最后一张图片时，同右边按钮点击无缝轮播。
