Shikong/uni-app-wx-study
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

封装

Browse Source
This commit is contained in:
shikong 2024-10-17 16:34:47 +08:00
parent 7f51077706
commit 7863c1ba57
Signed by: Shikong
GPG Key ID: BD85FF18B373C341
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/index/components/nav-bar/index.vue
View File

@ -7,11 +7,18 @@ const ctx = reactive({
capsuleWidth: 0, capsuleWidth: 0,
search: { search: {
keyword: "" keyword: ""
},
safeAreaInsets: {
top: 0
} }
}) })
let capsule = uni.getMenuButtonBoundingClientRect(); // 小程序右上角胶囊信息 let capsule = uni.getMenuButtonBoundingClientRect(); // 小程序右上角胶囊信息
let system = uni.getSystemInfoSync(); // 获取设备信息 let system = uni.getSystemInfoSync(); // 获取设备信息
let {safeAreaInsets} = system
console.log(system, safeAreaInsets)
ctx.safeAreaInsets = safeAreaInsets
ctx.navHeight = system.statusBarHeight + capsule.height; // 导航栏的高度 ctx.navHeight = system.statusBarHeight + capsule.height; // 导航栏的高度
ctx.statusBarHeight = system.statusBarHeight // 与顶部的距离 ctx.statusBarHeight = system.statusBarHeight // 与顶部的距离
ctx.capsuleWidth = capsule.width; // 胶囊按钮与右侧的距离 ctx.capsuleWidth = capsule.width; // 胶囊按钮与右侧的距离
@ -28,16 +35,9 @@ function searchKeyword() {
</script> </script>
<template> <template>
<view class="navbar" :style="{ minHeight: ctx.navHeight + 'px' }" style="background: #1296db"> <view :style="{paddingTop: ctx.safeAreaInsets.top + 'px', paddingRight: ctx.capsuleWidth + 'px'}" style="background: #1296db">
<view
class="topInfo"
:style="{
paddingTop: ctx.statusBarHeight + 'px',
paddingRight: ctx.capsuleWidth + 'px',
}">
<uni-search-bar v-model="ctx.search.keyword" bgColor="#EEEEEE" placeholder="请输入搜索内容" @confirm="searchKeyword" cancelButton="none"></uni-search-bar> <uni-search-bar v-model="ctx.search.keyword" bgColor="#EEEEEE" placeholder="请输入搜索内容" @confirm="searchKeyword" cancelButton="none"></uni-search-bar>
</view> </view>
</view>
</template> </template>
<style scoped> <style scoped>