html5导航栏悬浮置顶,（微信小程序）导航栏悬浮吸顶以及置顶的设置

前言

最近在做小程序的项目，遇到一些问题放在这里，一来作为自己经验收集册，收集自己的项目遇到的问题或者做的东西；二来将自己遇到的问题经验分享出来

前景提要

吸顶功能页面设置在静态的首页，作为一个首页展示的优化来做的，所以没有太多需要加载的数据，可以采用传统的判断滚动窗口高度设置固定栏

此方式不适用流加载或者其他需要大量频繁setdata的操作

吸顶悬浮导航条

成果展示

代码

wxml

我是导航条呀

悬浮~~

暂无服务提醒

卡充值

余额及时冲

我的钱包

员工福利专区

立即领取>

没有待领取福利

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 等模块

html5导航栏悬浮置顶,（微信小程序）导航栏悬浮吸顶以及置顶的设置相关推荐

八月微信小程序导航：官方文档+精品教程+demo集合（8月25...
2019独角兽企业重金招聘Python工程师标准>>> 1:官方工具: https://mp.weixin.qq.com/debug/w ... tml?t=147643467846 ...
微信小程序导航栏或菜单栏吸顶效果简单实现
微信小程序导航栏或菜单栏吸顶效果简单实现思路: 1.获取导航栏初始位置距顶部的距离s1(通过获取页面标签方法) 2.监听页面的滑动,获取滑动距离s2(使用onPageScroll) 3.当s2> ...
微信小程序-导航吸顶+view锚点
微信小程序--导航吸顶+view锚点导航栏滑动定位+view锚点效果图实现原理 WXML WXSS JS-主页面子页面-newcontent 导航栏滑动定位+view锚点我们在做小程序的时候 ...
如何去掉微信小程序导航栏，以及禁止页面滑动
如何去掉微信小程序导航栏,以及禁止页面滑动 1.微信小程序要去掉微信自带的导航栏,只需要在app.json中加上 "navigationStyle": "custom&q ...
微信小程序导航栏高度。分析手机状态栏高度、微信小程序胶囊高度等。
//获取系统信息的概念 console.log(uni.getSystemInfoSync()); let res = uni.getSystemInfoSync() //胶囊按钮的信息 consol ...
微信小程序导航：官方文档+精品教程+demo集合（5月31日更新)
官方文档 1:官方工具:https://mp.weixin.qq.com/debug/w - tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/d ...
微信小程序导航条配置图片背景
文章目录微信小程序导航条配置图片背景全部页面替换就首页特殊,其他页面纯色导航条(沿用微信那套) 相关代码如果你觉得写的不错或者帮到你了,记得给我点个赞哟~ 微信小程序导航条配置图片背景需要实 ...
微信小程序浮动按钮_操作按钮悬浮固定在微信小程序底部的实现代码
本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单,还不会的朋友一起跟着小编学习一下吧,希望对你们有所帮助. 常见的有加入购物车按钮.结算按钮.收货列表添加地址按钮. 以收货地 ...
按钮悬浮固定在微信小程序底部
http://mydown.yesky.com/news/87296687.html 本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单,还不会的朋友一起跟着小编学习一下吧,希 ...
aos动画库反向播放，pdf复制出现乱码，微信小程序底部栏联系客服
少小多才学,平生志气高.别人怀宝剑,我有笔如刀. 记录一些遇到的问题- 本文大概3000字,阅读大概需要9分钟 ** 本文目录一.pdf复制出现乱码问号问题二.aos动画库反向播放问题三.微信 ...

html5导航栏悬浮置顶,（微信小程序）导航栏悬浮吸顶以及置顶的设置

html5导航栏悬浮置顶,（微信小程序）导航栏悬浮吸顶以及置顶的设置相关推荐

最新文章

热门文章