小程序相关

1.右侧胶囊宽度,胶囊和文本重合问题

javascript 复制代码
// #ifdef MP-WEIXIN
// 获取胶囊左边界坐标
const { left } = uni.getMenuButtonBoundingClientRect()
this.rightSafeArea = left + 'px'
// #endif

//给到你的内容宽度
<view :style="{'max-width':rightSafeArea}">

2.在uview组件上修改样式不会生效,需要在外面套view

或者是在小程序开发工具中看下没有生效的view样式类名,用::v-deep写样式,h5和小程序用条件编译

3.顶部导航栏

顶部为搜索栏,可以获取胶囊信息设置

javascript 复制代码
const { height, top } = uni.getMenuButtonBoundingClientRect()
let statusBarHeight
uni.getSystemInfo({
	success: (e) => {
        statusBarHeight=e.statusBarHeight
    }
})
this.height= height + (top - statusBarHeight) * 2;

顶部为左侧返回按钮,中间为文本

javascript 复制代码
statusBar = e.statusBarHeight
const custom = wx.getMenuButtonBoundingClientRect()
customBar = custom.bottom + custom.top - e.statusBarHeight
//整个导航栏高度
:style="{'height':customBar+'px'}"
//标题内容
:style="{'line-height':statusBar+'px','margin-top':(customBar/2)+'px'}"

4.小程序底部占位

底部安全距离padding-bottom: env(safe-area-inset-bottom);

相关推荐
编程毕设1 小时前
基于小程序的智能停车管理系统设计与开发
小程序
Kelaru2 小时前
本地Qwen中医问诊小程序系统开发
python·ai·小程序·flask·project
初晨未凉4 小时前
uniapp返回webview返回小程序并且跳转回webview
小程序·uni-app
Python智慧行囊6 小时前
微信小程序交互精髓:点击操作与状态管理实战
微信小程序·小程序·交互
paopaokaka_luck1 天前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
春哥的研究所1 天前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
paopaokaka_luck1 天前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
贝格前端工场1 天前
小程序订阅消息设计:用户触达与隐私保护的平衡法则
大数据·小程序
weixin_lynhgworld1 天前
盲盒一番赏小程序:用科技重新定义“未知的快乐”
科技·小程序
Bruce_Json1 天前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass