前端开源框架如何提升开发效率与用户体验的关键因素
921
2023-11-13
微信小程序自定义导航栏及其封装的全过程
−目录一、导航栏适配1.1.在json文件里更改页面配置项1.2.导航栏适配每种机型二、封装导航栏组件2.1.wxml2.2.wxss2.3.js2.4.在页面中使用导航栏组件2.5.效果图总结
应用场景：我们在小程序中想要自定义导航栏（当然组件库更方便哈哈）
一、导航栏适配
1.1.在json文件里更改页面配置项
⭐⭐⭐
官方文档介绍的有：
"navigationStyle": "custom"
这样原本默认的导航栏就会消失了PS: 如果是单页面需要就写在对应页面的json内，如果全局需要就写在app.josn内
1.2.导航栏适配每种机型
⭐⭐⭐
在app.js 里面获取statusbarHeight（这个就是每种机型的导航高度，我们需要获取并且动态的展示）
wx.getSystemInfo获取。
我们要在对应该导航组件的js文件里面进行获取
data中定义一个数据在动态从app.js中获取将获取到的statusBarHeight，存储到data中在wxml里面动态的使用该数据
这样机型适配就完成啦o(￣︶￣)o
二、封装导航栏组件
⭐⭐⭐⭐⭐
2.1.wxml
这里我们使用了插槽（可以看看插槽的内容）
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--components/nav-bar/nav-bar.wxml-->
<view class="nav-bar">
<view class="status" style="height: {{statusHeight}}px;"></view>
<view class="nav">
<view class="left">
<view class="slot">
<slot name="left"></slot>
</view>
<view class="default">
<image class="icon" src="/assets/images/icons/arrow-left.png"></image>
</view>
</view>
<view class="center">
<view class="slot">
<slot name="center"></slot>
</view>
<view class="default">
{{title}}
</view>
</view>
<view class="right"></view>
</view>
</view>
2.2.wxss
⭐⭐⭐
这里主要控制导航栏显示的位置还有默认插槽用通过css3的伪类:empty，class="default"的view盒子默认的样式是display: none隐藏的，如果class="slot"的view盒子为空时，那么就会将class="default"的view盒子的样式设为display: flex（因为小程序是默认不显示默认插槽的）2.3.js
在properties下设置标题在options开启多个插槽?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// components/nav-bar/nav-bar.js
const app = getApp()
Component({
options: {
multipleSlots: true
},
properties:{
title: {
type: String,
value: "导航标签"
}
},
data:{
statusHeight:20
},
lifetimes: {
attached(){
this.setData({statusHeight: app.globalData.statusHeight})
}
}
})
2.4.在页面中使用导航栏组件
⭐⭐⭐
因为插槽的使用，这里就很方便了,如果添加内容，那么就会显示默认插槽
2.5.效果图
这就是大概的效果了，当然文字箭头这里都是可以自定义的hh
总结
到
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~