定位微信小程序导航栏

定位微信小程序,首先做一个关于头部的组件,
主要是让这个组件的位置固定
这里需要使用到css的 fixed定位和z-index的属性
下面展示一些 内联代码片

// A code block
var foo = 'bar';
// An highlighted block
		position: fixed;  //1
		z-index: 1;       //2
		top: 0rpx;        //3
		left: 0;          //4
		width: 100%;      //5
		line-height: 70rpx; //6

fixed这个属性可以理解为将某个元素黏子在屏幕的视图的某一区域上,设置top与left使头部组件黏在手机顶部,
而z-index是元素的展示优先级,使得上滑屏幕保证头部组件不会被其他内容所覆盖,一般元素的z-index的值为1,这个值只要不小于1可以随便设置,值越大,展示的优先级越高,

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序左侧导航栏可以通过设置样式中的position属性为fixed来实现悬浮效果,并通过设置height为100%来实现全屏展示。\[1\]这样当滑动右侧界面到底部时,左侧导航栏仍然可见。 然而,需要注意的是,微信小程序中的<van-index-bar />组件内部使用的是wx.pageScrollTo方法进行滚动,因此只支持页面级滚动,无法在滚动元素中嵌套使用,如使用overflow: scroll;或scroll-view。\[2\] 为了实现左侧导航栏右侧内容的联动,可以通过点击左侧某一项获取该元素的id,并将该id动态传递给右侧内容的scroll-into-view属性。scroll-into-view的值应为右侧view中某个子元素的id。当左侧id发生变化时,scroll-into-view会自动将右侧view滚动到相应的位置,实现联动效果。\[3\] #### 引用[.reference_title] - *1* *2* [微信小程序实现点击左侧导航栏自动定位到对应的位置](https://blog.csdn.net/qq_36181045/article/details/126176922)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [微信小程序分类-左侧导航与右侧内容联动](https://blog.csdn.net/zhouhangzooo/article/details/88775790)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值