微信小程序--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 是文本名稱，