首页 > 编程语言 >直播平台开发,小程序自定义搜索标题栏

直播平台开发,小程序自定义搜索标题栏

时间:2023-04-03 14:12:47浏览次数:43  
标签:标题栏 自定义 statusBarHeight height width 直播 按钮 margin

直播平台开发,小程序自定义搜索标题栏

一:需求

把微信小程序标题栏处变成搜索栏。

自定义返回上级页面。

二:需求分析

首先要把小程序标题栏设置为可自定义。

然后计算原标题栏的高度组成结构。

根据计算高度设置搜索框和返回按钮的布局。

最后进行代码功能实现。

三:功能实现

1:设置标题栏可自定义

usingComponents是使用的相关组件

 


{
    "usingComponents": {
        "van-uploader": "@vant/weapp/uploader/index",
        "van-button": "@vant/weapp/button/index",
         "van-search": "@vant/weapp/search/index"
      },
    "navigationStyle": "custom"
}

2:计算标题栏高度

标题栏高度组成部分:最上边的状态栏高度statusBarHeight和中间按钮高度getMenuButtonBoundingClientRect和中间按钮的上下边距margin

 

获取状态栏高度wx.getSystemInfo.statusBarHeight

获取中间按钮高度wx.getMenuButtonBoundingClientRect()(这里一共四个值top, width, height, right具体对应可查微信开发文档)

获取中间按钮的上下边距margin = top(中间按钮上边界坐标) - statusBarHeight

 


 onLoad: function (options) {
        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 // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
              })
            },
          })
        // 生命周期函数--监听页面加载
    },

 

 四:代码实现

1:js

 

Page({
    data:{
        navHeight: '',
        menuButtonInfo: {},
        searchMarginTop: 0, // 搜索框上边距
        searchWidth: 0, // 搜索框宽度
        searchHeight: 0, // 搜索框高度
    },
    goBack(){
        wx.navigateBack({
            delta: 1, // 回退前 delta(默认为1) 页面
        })
    },
    onl oad: function (options) {
        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 // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
              })
            },
          })
        // 生命周期函数--监听页面加载
    },
})

 

 2:wxss

 

/* 自定义导航栏 */
view {
  box-sizing: border-box;
  overflow: hidden;
}
.custom-bar {
  /* */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #fafafa;
  z-index: 9;
}
.custom-bar__wrapper {
  padding: 0 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-group {
  width: 88%;
  height: 100%;
  border: 1px solid #666;
  background-color: #fafafa;
  border-radius: 60rpx;
}
.van-search {
  font-size: 25rpx;
  margin: 0 -15rpx;
  height: 100%;
}
.goback {
  justify-content: flex-start;
  width: 40rpx;
  height: 40rpx;
  margin-left: 20rpx;
}
.search-btn {
  width: 100rpx;
  font-size: 35rpx;
}

 

 3:wxml

 

<!-- 自定义导航栏 -->
<view class="custom-bar" style="height:{{navHeight}}px">
    <view class="custom-bar__wrapper" style="margin-top:{{searchMarginTop}}px; height: {{searchHeight}}px;width: {{searchWidth}}px" >
        <image src="../../../images/assetsImg/img5.png" class="goback" bindtap="goBack"></image>
      <view class="search-group">
        <van-search use-action-slot="true" background="#fafafa" shape="round" field-class="van-search" focus  value="{{ inputValue }}" placeholder="请输入关键字" bind:change="changeValue"> <view class="search-btn" slot="action" bind:tap="onClick">搜索</view></van-search>
    </view>
    </view>
  </view>

 

 以上就是 直播平台开发,小程序自定义搜索标题栏,更多内容欢迎关注之后的文章

 

标签:标题栏,自定义,statusBarHeight,height,width,直播,按钮,margin
From: https://www.cnblogs.com/yunbaomengnan/p/17282890.html

相关文章

  • vue3 ant-Design-vue提交按钮放在表单外提交,自定义提交按钮
    <template><a-formref="urlEditRef":model="urlEditInfo"name="urlEdit_rule"layout="vertical"><a-form-itemlabel="跳转链接"name="longUrl":rules=&qu......
  • 【pytest】 pytest自定义标记 PytestUnknownMarkWarning处理方式
    未注册标记会出现warningssummary-- PytestUnknownMarkWarningPytestUnknownMarkWarning:Unknownpytest.mark.demo-isthisatypo?Youcanregistercustommarkstoavoidthiswarning-fordetails,seehttps://docs.pytest.org/en/stable/how-to/mark.html@......
  • Power BI App Souce所有的自定义视觉对象打包
    PowerBIAppSouce所有的自定义视觉对象提取PowerBI最全487个官网自定义视觉对象提取[Date:2023/04/03]官网地址:BusinessApps–MicrosoftAppSourcePowerBI自定义视觉对象的PBIVIZ和示例PBIX文件:   下载地址:PBICustomVisuals.zip ......
  • Visual Studio Code 使用插件 Markdown Preview Enhanced 导出文档时和自定义设置的预
    首先,我这里的预览主题设置为了vue.css  但是导出时并不正常,根本不是vue.css这个主题的外观。所以需要在插件中配置如下内容:以下配置项都在VSCode的Extension->MarkdownPreviewEnhanced中找到 1.CodeBlockTheme配置成预览一样  2.PrintBackground......
  • 【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒
    此页可在动态列表的基础上完善,也可以单独学习【微信小程序-原生开发】实用教程10-动态列表的新增、修改、删除效果预览核心技术列表的分页加载skip跳跃到指定下标开始查询limit限制返回的数据数量(云数据库最多20条/次,云函数最多100条/次)skip配合limit使用,便能实现分页啦!.ski......
  • Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
    需求描述末尾合计行的需求如下:第1列显示“合计”无法求和的列,显示“——”可以求和的列,显示求和结果,并添加对应的单位命中率列的合计逻辑为:总命中数/总射击次数代码实现要点详见代码中的备注<template><divclass="tableBox"><el-table:data="tableData"bo......
  • vue3 - 引入自定义插件的组件的具体写法
    1.背景我的这一篇随笔详细讲解组件怎么制作与引入使用【vue3-在单独的项目制作自定义组件插件,支持vite【前提不要使用webpack专属语法】,并引入插件-心得-岑惜-博客园(cnblogs.com)】但在局部引入组件时,eslint红色警告   引用名言:“又不是不能用==”强迫症看着实......
  • 直播音视频技术
    1.协议  流媒体  webRtc:浏览器音视频会议2011年谷歌提出。  直播时移模式  返回直播 斗鱼web直播可以查看两小时内的内容。    1.1RTMP协议   主流浏览器将不再支持flash,慎重考虑使用。    Flash流媒体系统    客户端:FlashPla......
  • 微信小程序自定义封装组件-showModal
    封装一个组件这里由于最近使用微信小程序居多,所以着重写的是小程序的,但是万变不离其宗,组件实现思路其实都差不多的微信小程序开发中官方自带的wx.showModal,这个弹窗API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件。下面我们进行一个自定义modal弹窗组件的开发,并......
  • 完了,良许直播中删库了……
    大家好,我是良许。今天跟大家聊个尴尬的事,大家可以本着看热闹不嫌事大的心态来听我唠唠。经常来我直播间(视频号+抖音)的小伙伴都知道,我最近一直都在直播间手把手现场写Shell脚本。就在前天晚上,我写Shell脚本的时候,不小心把当前目录下所有脚本(连同这个脚本本身)全部删除了,而且还全......