Comment uniapp détermine-t-il si le texte dépasse la zone spécifiée ?

Dans le développement mobile, nous rencontrons souvent une situation : nous devons déterminer si un morceau de texte dépasse la zone désignée. Par exemple, sur la page de profil utilisateur, le pseudo de l'utilisateur peut dépasser la zone d'affichage. Dans ce cas, nous devons tronquer ou abréger le pseudo.

Cet article expliquera comment utiliser uniapp pour déterminer si le texte dépasse la zone spécifiée, et comment tronquer et afficher les vignettes.

1. Si l'obtention du texte dépasse

Dans uniapp, vous pouvez utiliser l'API de l'applet WeChat pour obtenir les informations des nœuds de texte. Utilisez la méthode wx.createSelectorQuery() pour obtenir le nœud de page, puis utilisez la méthode select() pour obtenir le nœud de texte, et enfin utilisez la méthodeboundingClientRect() pour obtenir la position et la taille du nœud.

Le code spécifique est le suivant :

// 在页面中添加一个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()
}

Grâce au code ci-dessus, nous pouvons obtenir les informations de largeur et de hauteur du nœud de texte. Ensuite, nous pouvons les comparer à la largeur et à la hauteur du conteneur pour déterminer si le texte la dépasse.

2. Tronquer le texte

Lorsque le texte dépasse le conteneur, nous pouvons tronquer le texte et n'afficher qu'une partie du contenu. Dans uniapp, vous pouvez utiliser la méthode substr() ou la méthode slice() de js pour la troncature.

Le code spécifique est le suivant :

// 在页面中添加一个宽度为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()
}

Dans le code ci-dessus, nous détectons si la largeur du nœud de texte dépasse la largeur du conteneur de 200px. Si elle dépasse, nous calculons le nombre de caractères pouvant être affichés. Utilisez ensuite la méthode substr() pour tronquer le texte et ajouter des points de suspension à la fin.

3. Afficher le texte sous forme de vignettes

En plus de tronquer le texte, nous pouvons également afficher le contenu complet via l'affichage des vignettes. Dans uniapp, vous pouvez utiliser l'attribut CSS text-overflow et le mot-clé points de suspension pour obtenir l'effet miniature.

Le code spécifique est le suivant :

// 在页面中添加一个宽度为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;
}

Dans le code ci-dessus, nous masquons le contenu au-delà du conteneur en définissant l'attribut de débordement du conteneur sur caché. Utilisez ensuite l'attribut text-overflow et le mot-clé ellipsis pour ajouter des points de suspension, et utilisez l'attribut white-space pour empêcher le texte de s'enrouler.

Résumé

En utilisant les styles API et CSS fournis par uniapp et l'applet WeChat, nous pouvons facilement déterminer si le texte dépasse, tronquer le texte et afficher le texte sous forme abrégée. Dans le développement réel, choisir la méthode appropriée en fonction des besoins spécifiques peut améliorer efficacement l'expérience utilisateur de l'application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!