首页 > 编程语言 >【uni.app/微信小程序】 添加与胶囊平齐的盒子

【uni.app/微信小程序】 添加与胶囊平齐的盒子

时间:2023-05-08 15:13:44浏览次数:45  
标签:盒子 微信 app 平齐 uni 胶囊 menuButtonInfo

添加与胶囊平齐的盒子

image

<template>
    <view class="search_box" :style="'margin-top:'+searchBarTop+'px; height:'+searchBarHeight+'px'">
        您好
    </view>
</template>
<script>
	export default {
		data() {
			return {
				searchBarTop:0,
				searchBarHeight:0,
			};
		},
		onLoad() {
            //方法文档
            // https://uniapp.dcloud.net.cn/api/ui/menuButton.html#getmenubuttonboundingclientrect
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.searchBarTop = menuButtonInfo.top;
			this.searchBarHeight = menuButtonInfo.height;
		},
	};
</script>

<style>
	
	.search_box{
		background-color: blue;
	}
</style>

getMenuButtonBoundingClientRect() | uni-app官网 (dcloud.net.cn)

标签:盒子,微信,app,平齐,uni,胶囊,menuButtonInfo
From: https://www.cnblogs.com/yunlan/p/17381813.html

相关文章

  • linux、unix软链接注意事项
    前言在使用linux过程中,经常使用到软链接(类似windows快捷方式);创建软链接之后,删除时不注意就会出现到问题先说结论删除软链接,确实是使用rm进行删除;但是有个小细节必须要特别注意!rm-frxxxx/加了个/这个是删除文件夹rm-frxxxx没有/这个是删除软链接......
  • 直播开发app,VUE图片裁剪,打码,旋转功能
    直播开发app,VUE图片裁剪,打码,旋转功能1,先下载插件。 cnpminstallimage-mosaic-D   cnpminstall--savevue-cropper  ​2,在components目录下创建一个imageEdit文件夹,文件夹下创建index.vue,index.vue中内容如下:  <template> <div>  <el-dialog   t......
  • XUnit —— Record.Exception —— Stop Using Assert.Throws in Your BDD Unit Tests
    原文:https://www.richard-banks.org/2015/07/stop-using-assertthrows-in-your-bdd.htmlStopUsingAssert.ThrowsinYourBDDUnitTests I’msurewe’veallseenthe Assert.Throws assertionintestcodebynow,butjustincaseyouhaven’t,here'sasimple......
  • uniapp app端内嵌webview对接支付宝支付
    //app支付constappRequestPayment=(orderInfo:string)=>{uni.navigateTo({url:'跳转的路径?one='+encodeURIComponent(JSON.stringify(orderInfo))})}ViewCode<viewclass="page"><web-view:src="state.navU......
  • css 文字内容过长和下一个信息项重叠解决办法(uniapp)
    1.把固定高度注释掉,自动调整高度.cardBox{ padding:20rpx30rpx; .item{ //width:calc(100%-40rpx); //height:398rpx; padding:10rpx20rpx0rpx; margin-bottom:25rpx; border-radius:8rpx; box-shadow:0rpx4rpx16rpx2rpx#BDC0C6; background:......
  • Unity常用事件函数
    1publicclassEventFunction:MonoBehaviour2{3publicfloatattackValue=10000;4publicfloatcurrentHP;56//对变量赋值的顺序(左边最先赋值,右边最后赋值,以此类推):7//变量声明并直接赋值>检视面板赋值>Awake>OnEnable>Start>外部赋......
  • Mybatis-Plus基本CRUD——通用Mapper
    BaseMapper接口MyBatis-Plus中的基本CRUD在内置的BaseMapper中都已得到了实现,我们可以直接使用,接口如下:/***Mapper继承该接口后,无需编写mapper.xml文件,即可获得CRUD功能*<p>这个Mapper支持id泛型</p>**@authorhubin*@since2016-01-23*/publicinter......
  • 微信支付基于PHP
    //微信JSAPI支付前端页面wx.html<html><head><metahttp-equiv="content-type"content="text/html;charset=utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1"/><titl......
  • 微信小程序在wxml里不支持includes,indexOf,findIndex等方法
    小程序的wxml文件内不支持数组的includes,indexOf,findIndex等方法。不是垃圾是什么?玩什么标新立异?不会搞就别TM搞。 开发者:我想上二楼。WX:这里有一坨屎,吃子它,就让你上二楼。开发者:@#$%&@^$*^&*&^$%$^ 咋做?在任意目录创建一个.wxs文件,里面写上如下代码:文件-/utils/wuti......
  • 微信公众号对接ChatGPT-实现基于自己知识库的机器人功能-并且可以人工接入进行回复的
    现在很多教程有介绍如何把chatGPT对接到自己的公众号上,利用公众号的自动回复接口功能,实现用户在公众号与chatGPT进行交互。而我实现的功能比上面的要高级很多 首先,用户在公众号端发送咨询消息,可以得到自动回复,并且这个回复是基于我自己的知识库回答的  然后,客服在后台可......