常见兼容性问题：吸顶元素无法固定，会随着页面滚动抖动
解决方案：页面整体为弹性布局，中间加载部分自适应高度，总体结构为 顶部固定+内容+底部固定
注意整体弹性布局的时候如果要实现吸顶效果，必须将定位元素放到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)
}
众多类似商城项目中，都会有列表分类标签随着界面滚动吸顶的效果APP中实现相关功能很容易，h5也可以动态操作DOM来设置
微信小程序没有DOM，该怎么实现呢？
其实这个场景还是比较简单的，正常情况下导航标签是在列表中间的，滑到顶部时吸顶，再拉下来时又回到原来的位置
根据场景，有两个参考思路：
1、顶部定位一个常在的同样的导航标签，通过页面的 scrollOffset 来控制显隐即可
2、通过动态添加 fixed 样式，来动态改变标签在页面中的位置
ps：不过第二种思路会有一个缺陷就是切换位置时页面会因为少了一部分而上移，所以还是需要补白，所以还是用第一种思路
我这里是用了自定义导航栏的，所以实现上会有所不同，如果是用系统导航栏可以稍微调整一下，因为偏移量会有所区别
CSS部分
JS部分
其中 CacheUtil.naviStatuHeight 这个是我应用启动时获取的导航+状态栏高度，X和其他机型还是有所区别，如果是系统导航栏的话这些相关逻辑都可以省略
这里为什么用navigator而不用view呢？
因为navigator是原生组件，可以在最上层，因为有可能列表内容有原生组件的话滑动就会有问题，所以navigator在不设置url的情况下和view的效果差不多，故采用navigator
cover-view：bug: 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示，而且使用的版本限制也很多，所以就不考虑
