微信小程序--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'
  },

字体事件点击监听

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

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

字体文本内容更改或显示

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