<template>
<view class="main">
<view class="hander">
</view>
<view class="search">
<view class="searchIput">
<input type="text" placeholder="输入你要搜索的内容" placeholder-style='color:grey'>
<image src='@/static/search.png' />
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
created() {
//获取页面所有信息
uni.getSystemInfo({
success: (res => {
console.log(res)
})
})
//获取小程序悬浮球信息
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
console.log(menuButtonInfo)
//获取元素信息
let info = uni.createSelectorQuery().select(".hander");
info.boundingClientRect(function(data) { //data - 各种参数
console.log(data.width) // 获取元素宽度
}).exec()
},
}
</script>
<style>
.main {
height: 5000rpx;
}
.hander {
background-color: red;
border: 1px solid #777;
height: 500rpx;
}
.search .searchIput {
background-color: #e6e6e6;
width: 95%;
margin: 0 auto;
height: 72rpx;
line-height: 72rpx;
border-radius: 50rpx;
padding: 0 32rpx;
box-sizing: border-box;
display: flex;
align-items: center;
}
.search .searchIput input {
font-size: 26rpx;
width: 100%;
color: grey;
}
.search .searchIput image {
width: 34rpx;
height: 34rpx;
}
</style>
uniapp动态获取dom高度信息和小程序右上角胶囊(悬浮球)信息
于 2021-12-29 17:31:04 首次发布