小程序 icon、progress进度条、text、rich-text富文本组件

逃离我推掉我的手 2021-07-25 01:17 489阅读 0赞

icon
    	图标,组件属性的长度单位默认为px,支持传入单位(rpx/px)。
    	type:icon的类型
    		有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
    	size:icon的大小 
    	color:icon的颜色,同css的color
    
    progress
    	percent:number,百分比0~100
    	show-info:在进度条右侧显示百分比 	
    	border-radius:圆角大小
    	font-size:右侧百分比字体大小
    	stroke-width:进度条线的宽度
    	color:进度条颜色(请使用activeColor)
    	activeColor:已选择的进度条的颜色
    	backgroundColor:未选择的进度条的颜色
    	active:进度条从左往右的动画
    	active-mode:默认为backwards
    		backwards:动画从头播；
    		forwards:动画从上次结束点接着播 
    	duration:30,进度增加1%所需毫秒数
    	bindactiveend:动画完成事件
    	
    text
    	1.text组件内只支持text嵌套。
    	2.除了文本节点以外的其他节点都无法长按选中
    	
    	user-select:文本是否可选,该属性会使文本节点显示为 inline-block
    	space:显示连续空格
    		ensp:中文字符空格一半大小 	
    		emsp:中文字符空格大小 	
    		nbsp:根据字体设置的空格大小
    	decode:是否解码
    		解析的有  < > & '    
    
    rich-text
    
    	<rich-text
    		nodes:array|string,节点列表|HTML String
    		
    			array方式:
    				nodes:[{
    					type:'node',	默认为这种方式,可不写
    					attrs:{
    					   全局支持class和style属性，不支持id属性。
    				       class:'div_class',
    				       style:'line-height: 60px; color: #1AAD19;',
    				       
    				       alt,src,height,width, 	标签img支持
    				       start,type,	            标签ol支持
    				       width,					标签table支持
    				       colspan，height，rowspan，width, 	标签td支持
    				       colspan，height，rowspan，width,	标签th支持
    				       colspan，height，rowspan，width, 	标签tr支持
    				       dir, 		标签bdo支持
    				       span,width,	标签col支持
    				       span,width,	标签colgroup支持
    				    }, 	
    					name:'标签名',
    					children:[{...}],子节点列表结构和 nodes 一致
    				},{
    					type:'text',	文本节点必须这种方式
    					text:'...'
    				}]
    				
    			string方式:
    				"<div>...</div>"
    		space:string,显示连续空格 
    			ensp:中文字符空格一半大小 	
    			emsp:中文字符空格大小 	
    			nbsp:根据字体设置的空格大小
    	>	
    	</rich-text>
    	
    	tip: nodes不推荐使用String类型,性能会有所下降。
    	tip: rich-text组件内屏蔽所有节点的事件。
    	tip: attrs属性不支持id,支持class 。
    	tip: name属性大小写不敏感。
    	tip: 如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除。
    	tip: img标签仅支持网络图片。
    	tip: 如果在自定义组件中使用rich-text组件,那么仅自定义组件的wxss样式对rich-text中的class生效

代码示例:

Page({ 
      data: { 
        nodes: [{ 
          name: 'div',
          attrs: { 
            class: 'div_class',
            style: 'line-height: 60px; color: #1AAD19;',
          },
          children: [{ 
            type: 'text',
            text: 'You never know what you\'re gonna get.'
          }]
        }],
        str:`<div class="div_class"> <h1>Title</h1> <p class="p"> Life is <i>like</i> a box of <b> chocolates</b>. </p> </div> `
    }})
    
      <rich-text nodes="{ {nodes}}"></rich-text>
      <rich-text nodes="{ {str}}"></rich-text>