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

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

api文档指出

文本节点，支持转义符"\"。

除了文本节点以外的其他节点都无法长按选中

<view class="page">    <view class="page__hd">        <text class="page__title">video</text>        <text class="page__desc">视频</text>        <text class="page__desc2">demo</text>        <text class="page__desc3">demo</text>        <view class="page__descee">              <text>{{text}}</text>              <view class="btn-area">              <button bindtap="add">add line</button>              <button bindtap="remove">remove line</button>        </view></view>

运行结果如图：

字体大小设置

例如 title 文本，，对应有个属性 class="page_title" ,  找到项目中 对应的  .wxss 文件配置 

  .page__title{
    font-size: 20px;
}

font-size:20px；  就是设置字体大小的。

字体颜色设置

同上，在对应class 属性中加上

color: #888888;

字体样式设置

对应有属性 font-family     font-style  这个可以根据个人需要添加了

控制字体换行显示

 可以采用 标签 <view></view> 将text组件包裹起来，作为父标签，就可以作为新的一行

 或者采用 设置class 属性  加上  display: block;

控制字体距离周围边距

在class 属性中 根据需要采用 margin-top，  margin-bottom  ，padding  等 这类属性

字体动态获取方式

 <text>{{text}}</text>

这里文本静态内容，改成 {{text}}  ，然后在对应的 .js 文件中，

Page( {  data: {    text:'hello me'  },

这样text 文字就可以显示为如图中 hello me

字体事件点击监听

 <view bindtap="toast" class="usermotto">    <text class="user-motto">{{motto}}</text>  </view>

对view 添加 bindtap 属性， 这里toast 可以自定义名称，然后在对应的 .js 文件中，

 //事件处理函数 点击text  toast: function() {     ....  },

 

字体文本内容更改或显示

 toast: function() {    this.setData({ motto:"远程返回结果："})   },

 采用 this.setData() 即可， this 代表当前组件对象，  motto 是文本名称，