text和rich-text组件

这节课来了解一下常用的基础组件。

最常用的基础内容组件就是text,还有rich-text,其中tex这个组件就是一个普通的文本组件,类似于HTML里面的span标签,是一个行内的元素。

rich-text组件是一个富文本组件,支持把的HTML字符串渲染为wxml对应的UI结构。

接下来分别认识一下这两个组件如何来进行使用。首先咱们来看一下基本使用,通过text的select属性可以实现长按选中文本内容的效果,在页面上,可以放一个用户的手机号,然后这个手机号支持用户长按之后进行复制的操作,这时候只能使用text组件,注意在小程序里面只有text组件支持长按。

选中操作,如果把文本放到了view组件的内部,这个view是不支持长按选中复制这个效果的。

接下来做一演示,来打开自己的微信开发者工具,在这里我们先放一个view组件里面,放一个文本来写的文本这是手机号支持长按选中效果,然后我们放一个text里面放一个手机号13812345056。

大家看我鼠标放到这个手机号上面,但是我们发现并没有复制的选项,因为这个模拟器他无法100%的还原手机上的操作。这个选中操作,只能通过的真机来进行预览,可以开一个手机的微信软件,通过扫一扫去扫描这个预览的二维码,咱们在手机上去做下演示。

成功之后大家来看看手机上来进行操作,能否出现复制的选项。注意这个text文本,必须加一个属性是select double。加这个属性之后,然后点击这个预览的按钮咱们重新去进行预览的效果。

大家再次出现了这个预览的效果,这次咱们在手机上来进行长按。

如上效果,已经选中了。选中之后可以点击这个拷贝就可以将用户的手机号拷贝走,然后进行其他的操作。在小程序里面,如果想要实现长按选中效果的话只能使用tab的组件,而且必须去加一个select属性才可以。

IT赶路人

专注IT知识分享