IT评测·应用市场-qidao123.com

标题: 小程序组件 —— 24 组件案例 - 绘制公司信息地区 [打印本页]

作者: 万万哇 时间: 2025-1-5 22:00
标题: 小程序组件 —— 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企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)