uni-app项目实战笔记15--使用uni-popup实现弹出层和uni-rate实现评分效果

关于uni-popup组件可访问uniapp官网查看更多：uni-popup 弹出层 | uni-app官网。

重要属性配置：

属性名	类型	默认值	说明
animation	Boolean	true	是否开启动画
type	String	'center'	弹出方式
mask-click [即将废弃]	Boolean	true	蒙版点击是否关闭弹窗
is-mask-click [1.7.4新增]	Boolean	true	蒙版点击是否关闭弹窗
mask-background-color [1.7.4新增]	rgba	rgba(0,0,0,0.4)	蒙版颜色，建议使用 rgba 颜色值
background-color	String	'none'	主窗口背景色
borderRadius	String	无	设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
safe-area	Boolean	true	是否适配底部安全区

下面是uni-popup的使用示例：

			
				
					壁纸信息
					
						
					
				
			
			
				
					
						壁纸ID：
						13897856890321
					
				
				
					分类：
					明星美女
				
				
					发布者： 
					咸虾米
				
				
					评分：
					
						
						5分
					
				
				
				
					摘要：
					内容提要内容提要内容提要
				
			
				
					标签：
					
						标签名
					
					
					
						声明：本图片来自用户投稿，非商业使用，用于免费学习交流，如侵犯您的权益，您可以拷贝壁纸ID举报至平台，邮箱：[email protected]，管理员将删除侵权壁纸，维护您的权益。
					
				
			
		  
		
		
			
				
						壁纸评分
						
							
						
				
				
					
					{{userScore}}分
				
				
					确认评分
				
				
		

 使用ref为弹出层指定一个名称，

JS代码：

CSS代码：

重要知识点：

1.控制弹出方向： type指定弹出的类型,bottom从底部弹出，不带type即为中间层弹出；

2.评分组件：

allowHalf允许小数点半分，比如半颗星。

效果：