当前位置:首页 » 《随便一记》 » 正文

【小程序】微信小程序自定义导航栏及其封装

19 人参与  2022年12月11日 18:25  分类 : 《随便一记》  评论

点击全文阅读


??

✨: 微信小程序自定义导航栏

?:东非不开森的主页

?: 因为很多东西来不及去做去看可是时间很快总是赶不上,所以要去成长呀??

?: 如有错误或不足之处,希望可以指正,非常感谢?

应用场景:我们在小程序中想要自定义导航栏(当然组件库更方便哈哈)

小程序自定义导航栏

一、导航栏适配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

这里我们使用了插槽
(可以看看插槽的内容)

<!--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(因为小程序是默认不显示默认插槽的
/* components/nav-bar/nav-bar.wxss *//* 自定义导航 */.nav {  display: flex;  height: 44px;  color: #fff;}.left, .right, .center {  display: flex;  justify-content: center;  align-items: center;}.nav .left, .nav .right {  width: 120rpx;}.nav .center {  flex: 1;}/* 控制内容显示 */.left .icon {  width: 40rpx;  height: 40rpx;}.default {  display: none;}.slot:empty + .default {  display: flex;}

2.3.js

在properties下设置标题在options开启多个插槽
// components/nav-bar/nav-bar.jsconst 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

在这里插入图片描述
<( ̄︶ ̄)↗[GO!]<( ̄︶ ̄)↗[GO!]


点击全文阅读


本文链接:http://zhangshiyu.com/post/49610.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1