• 微信小程序自定义搜索导航栏


      需求背景:自定义微信小程序导航栏。

      因为项目需要,要实现如京东小程序类似的搜索导航栏(下图所示搜索框在导航栏中)。参考了官方API最终实现了该有的效果,顺便把此次实现的思路和代码记录下来。

    一、拆解分析

      按照正常的导航栏拆解来进行计算自定义导航栏的高度。

      根据下图所示可以得到导航栏的高度等于:手机状态栏的高度 + 胶囊按钮高度(途中标注菜单栏)+ 以及胶囊按钮的上下边距。

      根据微信 API - wx.getMenuButtonBoundingClientRect 可以得到胶囊按钮的坐标和高宽等信息,详见文档。

      再根据微信 API -  wx.getSystemInfo(Object object)  获得状态栏高度 — statusBarHeight。

      然后计算出边距为:margin = top(胶囊按钮上边界坐标) - statusBarHeight,

      最终得到导航栏的高度为:customBarHeight = height + statusBarHeight + (margin * 2)

      知道这些信息剩下的就是实现了,下面是全部实现代码。

    二、代码实现

    1、json文件设置

    "navigationStyle": "custom",

    2、JS代码部分:需要的data和设置值

      data: {
        navHeight: '',
        statusBarHeight: 0, // 状态栏高度
        searchMarginTop: 0, // 搜索框上边距
        searchWidth: 0, // 搜索框宽度
        searchHeight: 0 // 搜索框高度
      },
      onLoad: function () {
        let menuButtonInfo = wx.getMenuButtonBoundingClientRect()
        const { top, width, height, right } = menuButtonInfo
        wx.getSystemInfo({
          success: (res) => {
            const { statusBarHeight } = res
            const margin = top - statusBarHeight
            this.setData({
              statusBarHeight: statusBarHeight,
              navHeight: (height + statusBarHeight + (margin * 2)),
              searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距
              searchHeight: height,  // 与胶囊按钮同高
              searchWidth: right - width - 30 // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度,再减去30两边间距
            })
          },
        })
      },

    3、wxml代码

    <view class="search-input" style="height:{{navHeight}}px;padding-top:{{searchMarginTop}}px;">
        <view class="flex between input-box" style="height:{{searchHeight}}px; {{searchWidth}}px;">
          <i class="iconfont cs-search c9 mr10" bindtap="search"></i>
          <input class="v-expand f14 c3" value="{{search}}" placeholder="{{placeholder}}" placeholder-class="f14 c9" bindinput="inputValue" bindconfirm="search"/>
        </view>
      </view>

    4、css代码:样式控制及主要有吸顶的操作。

    .search-input{
      position: sticky;
      box-sizing: border-box;
      background: #fff;
      top: 0;
    }
    .input-box{
      box-sizing: border-box;
      padding: 0 30rpx;
      margin: 0 30rpx;
      background: #f7f7f7;
      border-radius: 30rpx;
    }
  • 相关阅读:
    Android Studio轻松上手指南(1)
    在MyEclipse下创建Java Web项目 入门(图文并茂)经典教程
    opencv提取截获图像(总结摘来)
    10.正则表达式匹配
    遍历 Map 的方式
    09.回文数
    08.字符串转换位整数
    07.整数反转
    06. Z字型变换
    05. 求最长回文子串
  • 原文地址:https://www.cnblogs.com/goloving/p/14627146.html
Copyright © 2020-2023  润新知