小程序组件 —— 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 与附近的间隙；
  

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。