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

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

api文档指出

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

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

    
        video
        视频

        demo

        demo

        
              {{text}}
              
              add line
              remove line
        

运行结果如图：

字体大小设置

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

  .page__title{
    font-size: 20px;
}

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

字体颜色设置

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

color: #888888;

字体样式设置

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

控制字体换行显示

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

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

控制字体距离周围边距

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

字体动态获取方式

 {{text}}

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

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

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

字体事件点击监听

 
    {{motto}}
  

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

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

 

字体文本内容更改或显示

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

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