小程序组件 —— 24 组件案例 - 绘制公司信息区域

在小程序中，如果想渲染文本，需要使用 text 组件，常用的属性有 2 个：

• user-select：用来控制文本是否可选，用于长按选择文本；
• space：显示连续空格；

注意事项：

• 除了文本节点以外的其它节点都无法长按选中；
• text 组件内只支持 text 嵌套；

下面打开微信开发者工具来进行演示，选择 index 首页文文件夹，选中 index.wxml 文件，在文件代码底部写一些组件信息：

由于 text 组件中没有使用 user-select 属性，所以长按文本之后并不能实现选中文本效果，我们在 text 组件中把 user-select 属性加上，当 user-select 的属性值为 true 时，表示长按文本之后可以实现选中文本效果；当我们设置 user-select 的属性值为 true 时，其属性值可以不写，默认为 true；当我们添加 user-select 属性之后，长按文本就能实现选中效果，如下：

当我们在 text 组件的文本中添加多个空格时，在模拟器上只会渲染展示一个空格，如下，我们在 text 组件的文本中添加五个空格，得到的渲染效果为：

当我们需要展示连续空格时，需要在 text 组件中使用 space 属性，space 有三个可选属性值：

• ensp 属性值，空格会以中文字符空格一半大小来进行展示，如下：

• emsp属性值，空格会以中文字符空格大小来进行展示，如下：

• nbsp 属性值，空格会以字符大小来进行展示，如下：

下面我们使用 text 组件实现公司信息区域，在 index.wxml 文件中找到公司信息区域，使用 text 组件填写相关内容，如下：

为了优化公司信息区域的样式，我们需要在 index.scss 文件中添加一些样式：

• 添加 info 类选择样式，使用 display 为 flex 的布局，选择 space-betwwn 布局方式，设置背景颜色和字体大小，具体如下：

• 为了避免公司信息区域与轮播图区域太近，需要在 index.scss 中添加一些样式，使公司信息区域和轮播图区域间隔大一点，且后续每一个区域与上一个结构都要有间隙，我们可以更改最外层 page 的样式配置，如下：
  
  使用 display 的 flex 布局，并将主轴方向调整为 column，接着使用伪类选择器来调整子元素间的间隔；为了使 page 四周也 有间隙，使用 padding 和 box-sizing 属性设置 page 与四周的间隙；

参考视频：尚硅谷微信小程序开发教程