Wie stellt Uniapp fest, ob Text den angegebenen Bereich überschreitet?

Bei der mobilen Entwicklung stoßen wir häufig auf eine Situation: Wir müssen feststellen, ob ein Text den vorgesehenen Bereich überschreitet. Beispielsweise kann der Spitzname des Benutzers auf der Benutzerprofilseite den Anzeigebereich überschreiten. In diesem Fall müssen wir den Spitznamen kürzen oder kürzen.

In diesem Artikel erfahren Sie, wie Sie mit uniapp feststellen, ob Text den angegebenen Bereich überschreitet, und wie Sie Miniaturansichten abschneiden und anzeigen.

1. Ob der Text größer ist als

In Uniapp können Sie die API des WeChat-Applets verwenden, um die Informationen von Textknoten abzurufen. Verwenden Sie die Methode wx.createSelectorQuery(), um den Seitenknoten abzurufen, verwenden Sie dann die Methode select(), um den Textknoten abzurufen, und verwenden Sie schließlich die Methode BoundingClientRect(), um die Position und Größe des Knotens abzurufen.

Der spezifische Code lautet wie folgt:

// 在页面中添加一个id为“text-wrapper”的文本节点
<view id="text-wrapper">{{text}}</view>

<!-- JS代码 -->
onReady() {
  wx.createSelectorQuery().select('#text-wrapper').boundingClientRect(rect => {
    console.log(rect.width)  // 文本宽度
    console.log(rect.height) // 文本高度
  }).exec()
}

Über den obigen Code können wir die Breiten- und Höheninformationen des Textknotens abrufen. Als nächstes können wir sie mit der Breite und Höhe des Containers vergleichen, um festzustellen, ob der Text darüber hinausgeht.

2. Den Text abschneiden

Wenn der Text den Container überschreitet, können wir den Text abschneiden und nur einen Teil des Inhalts anzeigen. In uniapp können Sie zum Abschneiden die substr()-Methode oder die Slice()-Methode von js verwenden.

Der spezifische Code lautet wie folgt:

// 在页面中添加一个宽度为200px的容器
<view class="container">

  // 在容器中添加一个id为“text-wrapper”的文本节点
  <view id="text-wrapper">{{text}}</view>

</view>

<!-- JS代码 -->
onReady() {
  wx.createSelectorQuery().select('#text-wrapper').boundingClientRect(rect => {
    if (rect.width > 200) {
      let len = Math.floor(200 / (rect.width / this.text.length))  // 根据容器宽度计算字符数
      this.text = this.text.substr(0, len) + '...'  // 截断字符串并添加省略号
    }
  }).exec()
}

Im obigen Code erkennen wir, ob die Breite des Textknotens die Breite des Containers um 200 Pixel überschreitet. Wenn sie größer ist, berechnen wir die Anzahl der Zeichen, die angezeigt werden können. Verwenden Sie dann die Methode substr(), um den Text abzuschneiden und am Ende Auslassungspunkte hinzuzufügen.

3. Text in Miniaturansichten anzeigen

Zusätzlich zum Abschneiden von Text können wir auch den gesamten Inhalt über die Miniaturansicht anzeigen. In uniapp können Sie das CSS-Attribut text-overflow und das Schlüsselwort ellipsis verwenden, um den Miniaturbildeffekt zu erzielen.

Der spezifische Code lautet wie folgt:

// 在页面中添加一个宽度为200px、高度为40px的容器
<view class="container">

  // 在容器中添加一个id为“text-wrapper”的文本节点
  <view id="text-wrapper">{{text}}</view>

</view>

<!-- CSS代码 -->
.container {
  width: 200px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Im obigen Code verbergen wir den Inhalt außerhalb des Containers, indem wir das Überlaufattribut des Containers auf „versteckt“ setzen. Verwenden Sie dann das Attribut „text-overflow“ und das Schlüsselwort „ellipsis“, um Ellipsen hinzuzufügen, und verwenden Sie das Attribut „white-space“, um zu verhindern, dass der Text umbrochen wird.

Zusammenfassung

Durch die Verwendung der von uniapp und dem WeChat-Applet bereitgestellten API- und CSS-Stile können wir leicht feststellen, ob der Text länger ist, den Text abschneiden und den Text abgekürzt anzeigen. In der tatsächlichen Entwicklung kann die Auswahl der geeigneten Methode entsprechend den spezifischen Anforderungen die Benutzererfahrung der Anwendung effektiv verbessern.

Das obige ist der detaillierte Inhalt vonWie stellt Uniapp fest, ob Text den angegebenen Bereich überschreitet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!