2022-3-WX-按钮带参-自定义方法名-全局样式-组件生命周期-更改data中的属性-触发子组件-判断手机-设置tabbar

已于 2022-11-25 21:24:57 修改
阅读量1.5k 收藏 1
点赞数
分类专栏： wx 文章标签： 小程序
于 2021-08-02 14:10:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49752665/article/details/119323957
版权

设置tabbar

   wx.setTabBarStyle({
         selectedColor: that.data.background    })

隐藏原生tabbar

  wx.hideTabBar();

判断手机

// 根据手机类型来判断是否是 iphone       
let modelmes = res.model
if(modelmes.search('iPhone') != -1) {
   
  if(res.safeArea.top > 20) {
   
    that.globalData.isIphoneX = true;
  }
}

触发子组件事件


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Lucy0612
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
Button点击事件绑定中如何传递带参数的方法

				
			

			

				

					mrzhengttl的博客
				

				

					05-09
					
					2万+
					
				

			

		

		

			
				
btn.onClick.AddListener(delegate () { this.OnBtnClick(true); });

传递一个有参数的方法用于传递参数。这样点击事件就能接收参数了。







using UnityEngine;  
using UnityEngine.UI;  
  
public class Test : MonoBehaviour 

			
		

	



                

              
                



	

		

			

				
					
微信小程序（二十二）action-sheet组件详细介绍

				
			

			

				

					09-01
				

			

		

		

			
				
当用户点击触发Action-Sheet的按钮时，可以调用`setData`方法改变`actionSheetHidden`的值，从而控制Action-Sheet的显示或隐藏。同时，可以通过`bindchange`事件监听Action-Sheet的状态变化，以便在用户选择某项或...

			
		

	



                


  
              

                


	

		

			

				
					
uni-app微信小程序image引入图片；background-image背景图引入图片；小程序预览本地图片；小程序图片过大引入报错；获取本地图片的网络地址；

					
热门推荐

				
			

			

				

					i_am_a_div的博客
				

				

					07-21
					
					2万+
					
				

			

		

		

			
				
uni-app小程序图片使用有image标签和background-image背景图两种方式：

下有获取本地图片的网络地址方式：见第四步
一、方式一：使用image标签引入：
1.官方文档说：src 仅支持相对路径、绝对路径，支持 base64 码；但是我使用了网络地址https也可以显示

目前支持以下四种方式引入：
	  <view>引入image的绝对路径src：</view>
      <image src="~@/static/iconimg/big.png"  

			
		

	





	

		

			

				
					
uni-app字体图标及设置背景图片

					
最新发布

				
			

			

				

					2201_76007015的博客
				

				

					06-15
					
					228
					
				

			

		

		

			
				
从网上下载合适的字体图标库，例如阿里巴巴矢量图标库（https://www.iconfont.cn/）中的字体图标库。将下载的字体图标库文件解压，将其中的字体文件（通常是一个后缀为.ttf的文件）复制到刚才创建的fonts文件夹中。通过以上步骤，就可以在uni-app中使用字体图标了。注意：这里的是字体图标对应的Unicode值，可以在下载的字体图标库中找到相应的Unicode值。在项目中找到static文件夹，创建一个新的文件夹，例如fonts，用来存放字体图标相关文件。

			
		

	



		

			
		



	

		

			

				
					
uni-app背景图片 background-image，支持 base64 格式图片、支持网络路径图片、本地路径背景图片

				
			

			

				

					JEFF_xieyuzhi的博客
				

				

					10-12
					
					1万+
					
				

			

		

		

			
				
背景图片

uni-app支持使用在 css 里设置背景图片，使用方式与普通web项目相同，需要注意以下几点：

支持 base64 格式图片。
	支持网络路径图片。
	使用本地路径背景图片需注意：
	图片小于 40kb，uni-app会自动将其转化为 base64 格式；
		图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
		...

			
		

	





	

		

			

				
					
uniapp开发微信小程序 ，使用本地图片做背景图应该怎么处理

				
			

			

				

					qq_43468165的博客
				

				

					02-22
					
					2495
					
				

			

		

		

			
				
注意，把获取可用的base64地址的方法放在computed 里面是非常必要的。如果放在methods里面初次进入这个页面时候会报错（除了首页之外）。这里就是跟methods和computed特性有关。

			
		

	





	

		

			

				
					
uni-app 中使用背景图片

				
			

			

				

					haplant的专栏
				

				

					05-30
					
					9217
					
				

			

		

		

			
				
uni-app 中采用 image 标签插入背景图片

			
		

	





	

		

			

				
					
微信小程序-微信小程序自定义组件（修正）

				
			

			

				

					02-26
				

			

		

		

			
				
5. **生命周期方法**：组件有自己的生命周期，包括 `created`、`attached`、`ready`、`moved`、`detached` 等方法，可以根据需要在这些方法中执行特定操作，如初始化数据或绑定事件。  6. **事件处理**：在 `.wxml` ...

			
		

	





	

		

			

				
					
微信小程序scroll-view点击项自动居中效果的实现

				
			

			

				

					10-15
				

			

		

		

			
				
在`onReady`生命周期函数中，使用`wx.createSelectorQuery()`创建选择器查询对象，选择`.scroll-view`元素并获取其边界信息。然后将得到的宽度存储在数据对象中。  ```javascript onReady() {  wx....

			
		

	





	

		

			

				
					
微信小程序代码-智能机器人.zip

				
			

			

				

					04-22
				

			

		

		

			
				
7. **生命周期管理**：每个小程序页面都有自己的生命周期，开发者需要理解并掌握页面的创建、显示、隐藏、卸载等生命周期方法，以便在合适的时间执行相应的操作。  8. **自定义组件**：为了提高代码复用性，开发者...

			
		

	





	

		

			

				
					
微信小程序源码-万年历.zip

				
			

			

				

					04-20
				

			

		

		

			
				
3. **JS逻辑处理**：每个页面的`.js`文件是逻辑处理的核心，包含了页面生命周期函数、事件处理函数等。例如，`onLoad`用于页面加载时执行，`onShow`表示页面显示时触发，而`onTap`则对应用户点击事件。  4. **数据...

			
		

	





	

		

			

				
					
uni-app中背景图片的设置

				
			

			

				

					qq_49171551的博客
				

				

					02-07
					
					5365
					
				

			

		

		

			
				
第二个：垂直位置，如果给具体的px值代表距离上边多少。background-size:contain:没有变形，完全显示了，表示图片一定被盒子包着，缩放后图片两边都要缩到盒子里才会停止缩放，都是按比例缩放，不会变形。background-size: cover:有一部分没有显示被覆盖的意思，表示图片一定要覆盖盒子，缩放后图片只要一边缩放到盒子内就停止缩放。(2)no-repeat/repeat:是否平铺（repeat:水平垂直都平铺，默认。总结：（2）（3） （4） （5）都是跟在图片路劲后面。

			
		

	





	

		

			

				
					
uniapp 背景图

				
			

			

				

					qq_38686150的博客
				

				

					09-25
					
					907
					
				

			

		

		

			
				
背景图须知
官网参考链接
使用本地路径背景图片需注意：

为方便开发者，在背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式；
图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。
本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径

注意：小程序不支持本地图片做背景图  仅仅支持 网络图片 和 base64(需要自己手动转)   ba

			
		

	





	

		

			

				
					
uniapp微信小程序无法使用本地静态资源图片，背景图在真机不显示方法

				
			

			

				

					我总是词不达意的博客
				

				

					09-30
					
					1万+
					
				

			

		

		

			
				
uniapp微信小程序背景图的显示问题。微信小程序无法使用本地静态资源图片作为背景图解决办法。

			
		

	





	

		

			

				
					
uni-app——小程序实现本地图片的上传以及身份证的智能识别

				
			

			

				

					Bonsoir777的博客
				

				

					12-29
					
					4881
					
				

			

		

		

			
				
本文主要讲解uni-app中如何实现本地图片上传的方法

			
		

	





	

		

			

				
					
uni-app页面中使用本地背景图片

				
			

			

				

					兮赫的博客
				

				

					03-23
					
					7447
					
				

			

		

		

			
				
精选30+云产品，助力企业轻松上云！>>> 
            
                                    
                        前言：
...

			
		

	





	

		

			

				
					
uni-app   background  使用本地图片

				
			

			

				

					weixin_46400038的博客
				

				

					12-02
					
					4228
					
				

			

		

		

			
				
解释：css背景图片不能使用本地图片，官方给的理由是小程序不支持本地图片，只支持网络访问或者base64。
所以uniapp也不支持，但是只要不超过40kb即可。 注意：把下面导入的图片路径改成你自己的。
还有：如果图片大小超过40kb是不会自动转换的，需要程序员自己吧图片转换成base64格式

<template>
   <view :style="{backgroundImage:`url(${indexBackgroundImage})`,backgroundSize: 'cov.

			
		

	





	

		

			

				
					
uniapp设置页面背景图片

				
			

			

				

					weixin_36493581的博客
				

				

					09-29
					
					8158
					
				

			

		

		

			
				
page{
	height: 100%;
	background: url('~@/static/images/bg.png');
}




			
		

	





	

		

			

				
					
uni-app 背景图片设置

				
			

			

				

					weixin_42349143的博客
				

				

					10-26
					
					2379
					
				

			

		

		

			
				
uni-app 背景图片设置方式一方式二
方式一
@import url('./guidetotal.css');
.mybackground{
	background: url(../../../static/community/zhidaobord.png) repeat fixed center;
}

方式二
.mybackground{
	background-image: url('....

			
		

	





	

		

			

				
					
uniapp scroll-into-view不自动跳转到顶端

				
			

			

				

					08-19
				

			

		

		

			
				
您好！对于 `scroll-into-view` 在 Uniapp 中不自动跳转到顶端的问题，您可以尝试以下几种方法来解决：

1. 使用 `setTimeout` 延迟执行 `scroll-into-view`，例如：

```javascript
setTimeout(() => {
  uni.pageScrollTo({
    selector: '#target-element',
    duration: 300,
    scrollTop: 0
  });
}, 100);
```

2. 直接使用小程序的原生 API `wx.pageScrollTo`，例如：

```javascript
setTimeout(() => {
  wx.pageScrollTo({
    selector: '#target-element',
    duration: 300,
    scrollTop: 0
  });
}, 100);
```

3. 在 `scroll-into-view` 的目标元素上添加 `scroll-top="{{scrollTop}}"` 属性，并在页面的 `data` 中定义 `scrollTop` 变量，例如：

```html
<view id="target-element" scroll-top="{{scrollTop}}">...</view>
```

```javascript
data() {
  return {
    scrollTop: 0
  };
},
```

然后在页面的生命周期或其他需要触发滚动的地方，将 `scrollTop` 设置为 `0`，例如：

```javascript
onLoad() {
  this.scrollTop = 0;
},
```

这样每次页面加载或触发滚动时，都会将目标元素滚动到顶端。

希望以上方法能够帮助到您！如果还有其他问题，请随时提问。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值