如何实现全屏小程序及自定义左上角胶囊

最新推荐文章于 2024-06-26 10:59:56 发布
最新推荐文章于 2024-06-26 10:59:56 发布
阅读量2.3k 收藏
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 全屏 自定义 胶囊
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sdfsfsdscd/article/details/91374727
版权
本文介绍了如何在微信小程序中实现全屏显示以及自定义全屏状态下左上角的返回按钮。全屏功能可以通过设置页面配置实现，需注意不同客户端版本的兼容问题。对于自定义返回按钮，文章强调了获取手机状态栏高度的重要性，并提供了相关接口，同时分享了通过测量得到的页面标题栏高度的经验值。
摘要由CSDN通过智能技术生成

我们在做一些譬如视频播放等功能的时候，有时候是期望可以全屏展示视频的，微信小程序为我们提供了这样的功能。

设置全屏

设置方法

我们可以在选择将整个小程序设置为全屏或者只把某个页面设置为全屏。

  • 修改app.json中window属性的navigationStyle属性
{
   
  "window": {
   
    "navigationStyle":"custom"
  }
}
  • 修改index页面的index.json中navigationStyle属性

                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  阿布ccc
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
微信小程序获取胶囊信息并对齐

				
			

			

				

					weixin_44850797的博客
				

				

					11-25
					
					2162
					
				

			

		

		

			
				
之前一直是开发app，为了裂变用户要转向小程序，才知道右上角这个东西叫胶囊

接到公司需求要将上方的搜索栏和将囊对齐并且一样宽，用了position：fixed样式后发现不管是用px还是rpx还是其他单位都无法解决不同手机型号的兼容问题，这个手机对齐了，其他手机就无法对齐。
最后发现原来官网有这个胶囊信息的获取uni.getMenuButtonBoundingClientRect()
链接: uniapp官网关于uni.getMenuButtonBoundingClientRect()
我是通过这个方法动态

			
		

	



                

              
                



	

		

			

				
					
header-navbar-小程序自定义导航栏，左上角胶囊按钮返回|首页详解.zip

				
			

			

				

					09-23
				

			

		

		

			
				
小程序自定义导航栏，左上角胶囊按钮返回|首页详解详情介绍地址：https://juejin.im/post/5d0219536fb9a07ef06f8eab主要API获取设备信息wx.getSystemInfo获得胶囊按钮坐标信息wx.getMenuButtonBoundingClientRect项目截图

			
		

	



                


  
              

                


	

		

			

				
					
uniapp标题水平对齐微信小程序胶囊按钮及适配

					
最新发布

				
			

			

				

					weixin_42220130的博客
				

				

					06-26
					
					932
					
				

			

		

		

			
				
标签加样式加动态计算实现效果。

			
		

	





	

		

			

				
					
小程序的自定义头，左上角显示图标

				
			

			

				

					sinat_35082096的博客
				

				

					05-13
					
					3260
					
				

			

		

		

			
				
根据ui设计的需求，小程序的导航头部需要显示logo

需要显示的页面json文件设置
  "usingComponents": {
    "no-data":"../../components/no-data/no-data"
  },
  "navigationBarTitleText":"首页",
  "enablePullDownRefresh": true ,
  "navigationStyle":"custom"
}

.wxml 文件的设置
<view
  style="z-inde

			
		

	



		

			
		



	

		

			

				
					
微信小程序自定义左上角胶囊样式

				
			

			

				

					半只
				

				

					12-25
					
					4408
					
				

			

		

		

			
				
1、 将app.js 中的 window 对象属性navigationStyle 改为自定义
  "window": {
    "navigationStyle": "custom"
  },

改完之后的效果:

2、获取 右上角胶囊的定位信息 设置

调用 wx.getMenuButtonBoundingClientRect() 函数得到右上角胶囊定位信息


所需要的 属性有 ： top,height属性，用于计算自定义左上角胶囊定位的位置
拿到 右上角胶囊的  top和height 相加得到 屏幕

			
		

	





	

		

			

				
					
微信小程序---从分享页面进来时左上角的自定义返回按钮的返回路径

				
			

			

				

					linss
				

				

					08-06
					
					2368
					
				

			

		

		

			
				
此方法需要自定义顶部栏
// 判断页面栈是否 <= 0，表示没有上一页
topReturnBtn() {
   let pages = getCurrentPages(); //获取所有页面
   console.log('pages---',pages);
   console.log('pages.length---',pages.length);
   if (pages.length <= 1){
   // 返回首页
       wx.switchTab({
        url:

			
		

	





	

		

			

				
					
微信小程序实现自定义头部导航栏（详细）

				
			

			

				

					苏苏就是小苏苏的博客
				

				

					10-26
					
					5395
					
				

			

		

		

			
				
1.实现效果

2.实现原理
2.1获取胶囊的详细信息

let menuButtonObject = wx.getMenuButtonBoundingClientRect();


width:胶囊的宽度；
height：胶囊的高度
top:胶囊距离顶部的距离
2.2获取导航栏的整体高度

wx.getSystemInfo({
   success: res => {
   	let statusBarHeight = res.statusBarHeight,navTop = menuButtonO

			
		

	





	

		

			

				
					
微信小程序自定义扫码功能界面的实现代码

				
			

			

				

					10-15
				

			

		

		

			
				
在微信小程序中，自定义扫码功能界面的实现是一项常见的需求，尤其当开发者希望提供更为个性化或集成更多功能的用户体验时。微信小程序不直接支持自定义界面的扫码功能，因此需要利用原生组件来达成目标。以下是一个...

			
		

	





	

		

			

				
					
微信小程序-自定义组件-遮罩层

				
			

			

				

					05-05
				

			

		

		

			
				
在微信小程序开发中，自定义组件是提升代码复用性和模块化的重要手段。遮罩层，也称为蒙层，是一种常见的UI元素，用于在页面上创建半透明的覆盖层，通常用于显示弹窗、加载提示或者进行用户交互时提供背景效果。在此...

			
		

	





	

		

			

				
					
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案

				
			

			

				

					10-15
				

			

		

		

			
				
在本文中，我们将深入探讨如何在微信小程序中实现自定义播放按钮、封面图以及在视频封面上添加文案。  首先，让我们了解`<video>`组件的基本用法。在微信小程序中，创建一个`<video>`标签并指定`src`属性为视频源...

			
		

	





	

		

			

				
					
详解微信小程序胶囊按钮返回|首页自定义导航栏功能

				
			

			

				

					10-16
				

			

		

		

			
				
对于一些电商平台来说，当商品被转发后会很影响客户查看其它产品和首页，这时候就需要使用自定义导航栏自己写一个“胶囊按钮”。这篇文章主要介绍了详见微信小程序胶囊按钮返回|首页自定义导航栏,需要的朋友可以参考下

			
		

	





	

		

			

				
					
详解钉钉小程序组件之自定义模态框（弹窗封装实现）

				
			

			

				

					10-15
				

			

		

		

			
				
在钉钉小程序的开发过程中，自定义模态框（弹窗封装实现）是一个常用的功能，它允许开发者根据需求创建具有特定布局和交互的对话框。本文将详细解析如何在钉钉小程序中实现自定义模态框，并提供相关的代码示例。  ...

			
		

	





	

		

			

				
					
小程序胶囊

				
			

			

				

					m0_68456754的博客
				

				

					05-30
					
					279
					
				

			

		

		

			
				
// app.js
App({
  // Appdata: {
  //   height: 0, //胶囊高度
  //   navheight: 0, //导航栏高度
  //   right: 0,
  //   left: 0,
  // },
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSy.

			
		

	





	

		

			

				
					
小程序胶囊信息

				
			

			

				

					兔子零
				

				

					12-20
					
					999
					
				

			

		

		

			
				
手机型号
胶囊位置信息
statusBarHeight
测试情况




iPhoneX
80 32 281 369 48 88
44
通过


iPhone8 plus
56 32 320 408 24 88
20
通过


iphone7
56 32 281 368 24 87
20
通过


iPhone6 plus
56 32 320 408 24 88
20
通过


iPhon...

			
		

	





	

		

			

				
					
如何自定义左上角的返回按钮

					
热门推荐

				
			

			

				

					u011189158的专栏
				

				

					04-08
					
					1万+
					
				

			

		

		

			
				
效果图：


代码如下：


//左上方返回图标
    UIImage * backImage = [[UIImage imageNamed:@"btn_nav_back.png"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    //添加左边按钮
    UIBarButtonItem * back

			
		

	





	

		

			

				
					
微信小程序自定义顶部导航栏的胶囊和微信自带的胶囊一样的透明背景色

				
			

			

				

					
				

				

					12-01
					
					4543
					
				

			

		

		

			
				
但是设置完这个后，胶囊的背景色是那种黑色半透明的效果：（微信开发者工具和真机上显示的效果不一致，要以真机为准）然后就可以调出和微信官方右侧胶囊一样的背景色和边框了。手机端的效果：所以还是要以手机端为准。

			
		

	





	

		

			

				
					
微信小程序 自定义组件之 胶囊对齐 搜索FloatSearch

				
			

			

				

					灵神翁的博客
				

				

					09-17
					
					941
					
				

			

		

		

			
				
大家好哇，我是梦辛工作室的灵，最近又写了一个 ui组件，是与 微信小程序 胶囊所对齐的 一个搜索框，还带展开过度动画哦，老样子，先看效果图。属性基本和input 一致，得记得放到最顶端哦。就这样就可以了，手工。

			
		

	





	

		

			

				
					
微信小程序原生实现自定义动画弹框教程

				
			

			

				

					
				

			

		

		

			
				
本示例介绍如何在微信小程序中使用原生方法实现自定义动画弹框和提示框，主要通过CSS3动画来完成。  在微信小程序开发中，为了提供良好的用户体验，经常会需要实现各种交互式的提示效果，如底部弹出框、顶部提示框等...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值