微信小程序云开发之自定义顶部导航栏搜索框(非组件)

前言

      提到微信小程序,就不得不提到它那磨人的顶部导航栏,真的有被丑到。身为强迫症患者,笔者实在是难以忍受,好在官方提供了解决方案,但是对于初学者还是有一丢丢的难度,为了初学者不在重蹈笔者的老路,这篇文章就给大家分享一下如何做一个好看的自定义顶部导航栏。

注意:本篇文章分享的是如何做一个好看的自定义导航栏,不是做组件哦!

正文

一、隐藏原生navigationBar

navigation-bar是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏。 

1.全局自定义顶部导航栏

在app.json的“window”里添加"navigationStyle": "custom"

"window": {
	"navigationStyle": "custom"
}

 2.单独页面自定义顶部导航栏

在该页面的json文件里添加"navigationStyle": "custom"

{
  "usingComponents":{},
  "navigationStyle": "custom"
}

二、获取系统及按钮信息

1.js页面

获取系统信息并计算按钮位置信息

const app=getApp()
Page({
  data: {
    page_show:false,
    navHeight: '',
    menuButtonInfo: {},
    searchMarginTop: 0, // 搜索框上边距
    searchWidth: 0, // 搜索框宽度
    searchHeight: 0 ,// 搜索框高度
  },
 
 
  onLoad: function (options) {
    var systeminfo=wx.getSystemInfoSync()
    //console.log(systeminfo.windowHeight)
    this.setData({
      movehight:systeminfo.windowHeight,
      movehight2:systeminfo.windowHeight-100
    })
 
    this.setData({
      menuButtonInfo: wx.getMenuButtonBoundingClientRect()
    })
    console.log(this.data.menuButtonInfo)
    const { top, width, height, right } = this.data.menuButtonInfo
    wx.getSystemInfo({
      success: (res) => {
        const { statusBarHeight } = res
        const margin = top - statusBarHeight
        this.setData({
          navHeight: (height + statusBarHeight + (margin * 2)),
          searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距
          searchHeight: height,  // 与胶囊按钮同高
          searchWidth: right - width -20// 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
        })
      }
    })
 
  }, 
})

2.wxml页面


通过获取的数据编写搜索框

<!--搜索-->
<view  style="height:{{navHeight}}px;background:#ffffff;position: sticky;top: 0px;z-index:99999; " >
  <view class="custom-bar__wrapper" style="margin-top:{{searchMarginTop}}px; height: {{searchHeight}}px;width: {{searchWidth}}px;position:absolute;" >
    <view class="search-group" style="position:absolute;">
      <image    style="left: 7rpx;" src="/images/icon/sousuo.png" mode="aspectFit" />
      <input  class="search-group__input" type="text" placeholder="搜搜校园日常动态吧!" placeholder-style="color:#161823;" confirm-type="search" value="{{search}}" maxlength="25" bindconfirm="search"></input>
    </view>
  </view>
</view>

 3.css页面

美化搜索框 

.custom-bar__wrapper {
  left: 24rpx;
  padding: 0 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-group {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background:#F0F8FF ;
  border-radius: 100rpx;
  padding: 0 15rpx;
}
.search-group > input {
  font-size: 25rpx;
  left: 14px;
}
.search-group > image {
  height: 36rpx;
  width: 36rpx;
  margin-right: 20rpx
}

 4.app.js页面

这是最容易忘的页面,一定要记得编写

App({
  onLaunch: function () {
    wx.getSystemInfo({
      success: e => {
        this.globalData.StatusBar = e.statusBarHeight;
        let custom = wx.getMenuButtonBoundingClientRect();
        this.globalData.Custom = custom;  
        this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
      }
    })
  },
})

 三、查看效果

 

总结思路

  • 隐藏原生顶部导航栏
  • 获取胶囊按钮、状态栏相关数据以供后续计算
  • 根据不同机型计算出该机型的导航栏高度,进行适配
  • 编写新的导航栏页面
  • 应用获取的按钮参数
  • css美化界面 
  • 3
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
引用[1]:该微信小程序云开发源码是一个校招信息平台,基于腾讯云服务开发,使用了微信云开发和原生微信开发,UI方面使用了vant和colorui。项目模块包括资讯模块、题库模块、签到模块、首页模块和我的模块。资讯模块包含了校招资讯的查看、点赞、收藏、笔记和分享功能。题库模块包含了笔试面试题库和随机刷题功能。签到模块包含了校招信息的精选、热招、倒计时和宣讲会资讯。首页模块包含了内推直招、简历和薪资待遇信息。我的模块包括个人收藏、点赞和笔记信息以及签到功能。[1] 引用[2]:另外一个微信小程序云开发源码是一个简单的商城小程序,实现了首页、分类页面、商品列表页面、商品详情页面、购物车和个人页面。该小程序的功能较为简单,适合小白参考。数据存储在微信云开发数据库中,可以根据自己的需求在数据库中修改样式和图片。[2] 引用[3]:还有一个微信小程序云开发源码是一个校招信息平台,名为小贝校招。该小程序提供了校招相关的信息,可以在微信小程序搜索"小贝校招"进行体验。后台使用了cms系统,可以在提供的地址中查看内容,但是该账号只能查看,无法修改内容。[3] 以上是三个不同的微信小程序云开发源码,分别是校招信息平台、简单商城和小贝校招。您可以根据自己的需求选择其中一个源码进行参考和使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

耀南.

你的鼓励将是我最最最最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值