小程序相关

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);

相关推荐
fakaifa16 小时前
点大餐饮独立版系统源码v1.0.3+uniapp前端+搭建教程
小程序·uni-app·php·源码下载·点大餐饮·扫码点单
说私域1 天前
基于开源 AI 大模型 AI 智能名片 S2B2C 商城小程序视角下的企业组织能力建设与破圈升级
人工智能·小程序
fakaifa1 天前
【最新版】CRMEB Pro版v3.4系统源码全开源+PC端+uniapp前端+搭建教程
人工智能·小程序·uni-app·php·crmeb·源码下载·crmebpro
2501_915918412 天前
iOS 应用上架全流程实践,从开发内测到正式发布的多工具组合方案
android·ios·小程序·https·uni-app·iphone·webview
上海云盾第一敬业销售2 天前
小程序被爬虫攻击,使用waf能防护吗?
爬虫·小程序
suncentwl2 天前
做一个答题pk小程序多少钱?
小程序·答题小程序·知识竞赛·答题pk软件
说私域2 天前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化策略研究
人工智能·小程序
咸虾米_2 天前
微信小程序通过uni.chooseLocation打开地图选择位置,相关设置及可能出现的问题
微信小程序·小程序·uniapp开发·小程序地图api
未来之窗软件服务2 天前
蔬菜批发小程序:生产商的数字化转型利器——仙盟创梦IDE
小程序·自动化·仙盟创梦ide·东方仙盟·蔬菜批发·批发系统
数据皮皮侠2 天前
最新上市公司业绩说明会文本数据(2017.02-2025.08)
大数据·数据库·人工智能·笔记·物联网·小程序·区块链