[微信小程序]基础内容组件text、rich-text、icon、progress

常用的基础内容组件

text与rich-text

在这里插入图片描述

  1. 通过text 组件的selectable属性，实现长按选中文本内容的效果：
// 看到长按效果就可以想到text组件，不要把属性写到view组件里面
//在list3.wxml中

// <!--pages/list3/list3.wxml-->
<view>
  手机号码：
  <text selectable>18373704033</text>
</view>

效果如下：
在这里插入图片描述
运行长按效果需真机调试，模拟器实现不了效果

2.rich-text

// 通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构：

// <rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

效果如下：
在这里插入图片描述

icon

在这里插入图片描述
在list4.wxml中

// <!--pages/list4/list4.wxml-->
<icon type="success" size="40" color="pink"></icon>

效果如下:
在这里插入图片描述

progress

进度条属性
在这里插入图片描述
案例代码如下：

// bindactiveend动画完成事件需在.js文件中处理

// 
<view style="padding: 50px;">
<progress percent="60" show-info border-radius="40" font-size="30"
stroke-width="30" activeColor="red" backgroundColor="green"
active></progress>
</view>

效果如下:
在这里插入图片描述
padding与margin的区别。1

  1. 前者是边框与内容的距离，margin是边框与边框之间的距离。
    如图：在这里插入图片描述↩︎

版权声明：本文为weixin_56296642原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。