前言
最近在做小程序的项目，遇到一些问题放在这里，一来作为自己经验收集册，收集自己的项目遇到的问题或者做的东西；二来将自己遇到的问题经验分享出来
前景提要
吸顶功能页面设置在静态的首页，作为一个首页展示的优化来做的，所以没有太多需要加载的数据，可以采用传统的判断滚动窗口高度设置固定栏
此方式不适用流加载或者其他需要大量频繁setdata的操作
吸顶悬浮导航条
成果展示
代码
wxml
我是导航条呀
悬浮~~
暂无服务提醒
卡充值
余额及时冲
我的钱包
员工福利专区
立即领取>
没有待领取福利
js
Page({
/**
* 页面的初始数据
*/
data: {
scrollTop: null
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
},
scroll: function (e) {
this.setData({ scrollTop: e.detail.scrollTop })
},
})
wxss
.page-group{
display: table;
/* background-color: blueviolet; */
width: 100%;
table-layout: fixed;
position: relative;
top: 0;
left: 0;
z-index: 999;/*这个设置在原生组件中用于置顶导航条*/
}
.page-group-position{
position: fixed;
background-color:#fff
}
/*这两个是关于吸顶设置的，其他的自己设置*/
导航条就这么设置好了，但是由于后面有用到原生组件，可能会出现导航条被原生组件覆盖，但是我们要的导航条就是要显示在顶层啊！
置顶悬浮导航条
情境一
问题描述：因为使用view，层级没有原生组件层级高会被覆盖
思路：那么把view层级提升成原生组件同层级就好了
寻找解决：看官方文档得知，原生组件的层级最高，所以要想层级不低于原生组件，那么就只能将view提升为原生组件，微信提供了cover-view组件
结果：使用cover-view实现了导航条的置顶
情景二
问题描述：cover-view的使用有很多限制(详见官方文档)其中就有不适用if判断控制显示，但是项目中恰好需要这部分的实现
思路：在替他原生组件中寻找cover-view的替代品
寻找解决：查看文档，在原生组建中筛选，筛选条件：没有if使用的限制，需要显示视图不需要多余的video之类的，暂且找到了navigate组件，不写URL时，可当作view使用，完美！就它了
结果：使用navigate组件完美解决层级并且可以随意使用if 等模块
