uniapp开发小程序,设置iphone底部安全区域

这篇具有很好参考价值的文章主要介绍了uniapp开发小程序,设置iphone底部安全区域。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

//app.vue
//设备信息
onLaunch: async function () {
    let app = uni.getSystemInfoSync();
    console.log('设备信息', app)
    let top = app.safeArea.top //屏幕顶部安全距离
    let height = app.safeAreaInsets.bottom //屏幕底部安全距离
}

//vux 保存上面获取到的两个变量
this.set_top(top);
this.set_safeAreaBottom(height);
 methods: {
    ...mapActions(['setLogined', 'removeLogined']),
    ...mapMutations(['set_safeAreaBottom', 'set_top'])
  },
//vuex
const store = new Vuex.Store({
    state: {
        safeAreaBottom: 0,
        top: 0,
    mutations: {
        set_safeAreaBottom (state, data) {
            state.safeAreaBottom = data
        },
        set_top (state, data) {
            state.top = data
        },
    },
    actions: {
       ....
    }
})
//这里dom结构我举个例子,仅供参考
<view class="safeArea" :style="{ 'padding-bottom': `${safeAreaBottom + 114}` + 'rpx' }">
  <view class="content">
  </view>
//底部
  <view class="flex justify-around bg-white" style="width:100%;height: 100rpx;">
  </view>
</view>

上面dom结构的,根据需求是这样的:整个屏幕被两个view占满,其中底部view是固定在底部不动的,content内容立马是高度盛满剩下屏幕高度,并且overflow:scorll ; safeArea里面的动态样式中的safeAreaBottom是vuex保存的值,后面加的114,是底部高度再略高一点:“100+14” ,其中14你给不给随意。

.safeArea {
  height: 100%;
  // padding-bottom: var(--safeAreaBottom);
}

.content {
  height: 100%;
  overflow-y: scroll;
}

写到这里就没啦~ 手机顶部的安全距离 等有需求碰到了我再过来详细记录~~ 值已经在上面获取到了,就是vuex保存的top变量的值。文章来源地址https://www.toymoban.com/news/detail-517768.html

到了这里,关于uniapp开发小程序,设置iphone底部安全区域的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 打包成APP或小程序后或H5后 IOS(iphoneX机型) 底部安全区域适配(避开底部黑条虚拟键)

    在 manifest.json 文件的 \\\"app-plus\\\" 节点下添加 \\\" safearea \\\" 适配 iOS 的安全区域, \\\"background\\\" 对应正常模式下安全区域外的背景颜色, \\\"backgroundDark\\\"对应暗黑模式(夜间模式 / 深色模式)下安全区域外的背景颜色 APP端不使用配置,非APP端可不配置   然后使用CSS常量    constant(safe-are

    2024年02月22日
    浏览(50)
  • uni-app底部安全区调整

    uni-app 在app端默认为页面底部做了安全区适配(针对iphonex以上机型)。 如果想移除这个高度,可以在 manifest.json 的app-plus节点下添加以下代码 配置后需要重新编译 注意: 不支持单个页面移除安全区,所以加此配置后需要自己为每个页面(tabbar除外)适配安全区 除tabbar页面外,

    2024年02月16日
    浏览(50)
  • uniapp中ios底部安全区域问题

    1、App:在manifest.json源码视图中找到app-plus,添加safearea配置 2、给page设置CSS 3、找到template.h5.html文件,给meta添加viewport-fit=cover

    2024年02月11日
    浏览(38)
  • 【底部消息红点提示】uniapp开发小程序时,使用uni.setTabBarBadge设置底部菜单的红点

    功能描述:无论点击底部的哪个菜单栏,都可以看到第二个菜单栏下显示的红点通知。 如果只在人脉当前页面设置的话,当你在第二个菜单栏的页面中调用 uni.setTabBarBadge 方法设置红点后,切换到第一个菜单栏的页面时,是无法看到第二个菜单栏的红点的。 解决方法:如果希

    2024年02月12日
    浏览(45)
  • uniApp解决ios app真机底部安全区域(空白)问题

    首先我们要打开项目中的manifest.json文件,找到开源码视图配置,添加和修改: 视图如下:

    2024年01月24日
    浏览(39)
  • 【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入

    在正式开发小程序的功能之前,首先需要确定小程序的主要框架。 我的小程序需要创建的页面是“首页”、“我想要”、“私信”、“我的”,“首页”已经存在于项目中,不需要重复创建。创建过程如下: 创建成功,不仅创建了 star.vue , Hbuilder 还自动帮助创建了 star 文件

    2024年02月16日
    浏览(49)
  • 微信小程序不同机型底部安全区域问题

    在微信小程序开发过程中,有些页面底部按钮是固定在底部的,还有如果是自定义tabbar也是需要固定在底部的,这里有两个问题: 不同机型的底部安全区域不同,如有些苹果手机底部有操作栏,这部分距离需要留出来否则会遮挡内容 如果底部有固定定位元素,可能会导致内

    2024年02月11日
    浏览(46)
  • 微信小程序 ---- iPhone X 以上机型留出底部安全距离

    在微信小程序设计按钮固定底部时,如果在编辑器使用的模拟器是iPhone X以下的机型时没有什么问题。 但是如果iPhone X以上的机型,会发现底部有黑条,会挡住按钮,而且操作不便。 所以我们要为底部按钮设置一个自适应高度,当机型为iPhone X以下或者安卓系统时,底边距离

    2024年02月15日
    浏览(39)
  • 微信小程序兼容iphone适配安全区域

    背景:    小程序页面底部在ios中会有小黑条遮挡 上代码: 项目描述:   微信小程序是通过 webview 组件嵌入H5网页,需要解决适配安全区域问题。  首先无法在微信小程序内做任何操作,因为 webview 添加padding-bottom样式无效,且webView会自动铺满整个小程序页面, 需要在嵌入

    2024年04月14日
    浏览(36)
  • 【uniapp】uniapp设置安全区域:

    一、效果图: 二、实现代码:

    2024年02月13日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包