微信小程序text标签-微信小程序--text组件学习-小程序标签-即速应用

微信小程序text标签-微信小程序--text组件学习-小程序标签

浏览量：1806 时间：2020-03-20 来源：BunToy

1.微信小程序--text组件学习
2.
3.api文档指出
4.文本节点，支持转义符""。
5.除了文本节点以外的其他节点都无法长按选中
viewclass="page"viewclass="page__hd"textclass="page__title"video/texttextclass="page__desc"视频/texttextclass="page__desc2"demo/texttextclass="page__desc3"demo/textviewclass="page__descee"text{{text}}/textviewclass="btn-area"buttonbindtap="add"addline/buttonbuttonbindtap="remove"removeline/button/view/view
6.运行结果如图：
7.
8.字体大小设置
9.例如title文本，，对应有个属性class="page_title",找到项目中对应的.wxss文件配置
10..page__title{font-size:20px;}
11.font-size:20px；就是设置字体大小的。
12.字体颜色设置
13.同上，在对应class属性中加上
14.color:#888888;
15.
16.字体样式设置
17.对应有属性font-familyfont-style这个可以根据个人需要添加了
18.控制字体换行显示
19.可以采用标签view/view将text组件包裹起来，作为父标签，就可以作为新的一行
20.或者采用设置class属性加上display:block;
21.
22.控制字体距离周围边距
23.在class属性中根据需要采用margin-top，margin-bottom，padding等这类属性
24.字体动态获取方式
25.text{{text}}/text
26.这里文本静态内容，改成{{text}}，然后在对应的.js文件中，
27.
Page({data:{text:'hellome'},这样text文字就可以显示为如图中hellome
28.字体事件点击监听
viewbindtap="toast"class="usermotto"textclass="user-motto"{{motto}}/text/view对view添加bindtap属性，这里toast可以自定义名称，然后在对应的.js文件中，//事件处理函数点击texttoast:function(){....},
29.字体文本内容更改或显示
toast:function(){this.setData({motto:"远程返回结果："})},采用this.setData()即可，this代表当前组件对象，motto是文本名称，