uniapp はテキストが指定された領域を超えるかどうかをどのように判断しますか?

モバイル開発では、テキストの一部が指定された領域を超えているかどうかを判断する必要があるという状況によく遭遇します。たとえば、ユーザー プロフィール ページでは、ユーザーのニックネームが表示領域を超える場合があるため、ニックネームを切り詰めたり省略したりする必要があります。

この記事では、uniappを使って文字が指定範囲を超えているかどうかを判定する方法と、サムネイルを切り詰めて表示する方法を紹介します。

1. 取得したテキストが

を超えるかどうか uniappではWeChatアプレットのAPIを利用してテキストノードの情報を取得することができます。 wx.createSelectorQuery() メソッドを使用してページ ノードを取得し、次に select() メソッドを使用してテキスト ノードを取得し、最後にboundingClientRect() メソッドを使用してノードの位置とサイズを取得します。

具体的なコードは次のとおりです:

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

上記のコードを通じて、テキスト ノードの幅と高さの情報を取得できます。次に、それらをコンテナの幅と高さと比較して、テキストがそれを超えているかどうかを判断します。

2. テキストの切り詰め

テキストがコンテナを超える場合、テキストを切り詰めてコンテンツの一部のみを表示できます。 uniappではjsのsubstr()メソッドやslice()メソッドを使って切り詰めることができます。

具体的なコードは次のとおりです:

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

上記のコードでは、テキスト ノードの幅がコンテナの幅を 200px 超えているかどうかを検出します。超えている場合は、表示できる文字数です。次に、substr() メソッドを使用してテキストを切り詰め、最後に省略記号を追加します。

3. テキストのサムネイル表示

テキストを切り捨てるだけでなく、サムネイル表示によって完全なコンテンツを表示することもできます。 uniapp では、CSS text-overflow 属性と省略記号キーワードを使用して、サムネイル効果を実現できます。

具体的なコードは次のとおりです:

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

上記のコードでは、コンテナのオーバーフロー属性を非表示に設定することで、コンテナの外のコンテンツを非表示にします。次に、text-overflow 属性と ellipsis キーワードを使用して省略記号を追加し、white-space 属性を使用してテキストが折り返されないようにします。

概要

uniapp と WeChat アプレットが提供する API と CSS スタイルを使用すると、テキストが超過しているかどうかを簡単に判断し、テキストを切り捨て、テキストを短縮して表示できます。実際の開発では、特定のニーズに応じて適切な方法を選択することで、アプリケーションのユーザー エクスペリエンスを効果的に向上させることができます。

以上がuniapp はテキストが指定された領域を超えるかどうかをどのように判断しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。