Bagaimanakah uniapp menentukan sama ada teks melebihi kawasan yang ditentukan?

Dalam pembangunan mudah alih, kita sering menghadapi situasi: kita perlu menentukan sama ada sekeping teks melebihi kawasan yang ditetapkan. Sebagai contoh, pada halaman profil pengguna, nama panggilan pengguna mungkin melebihi kawasan paparan Dalam kes ini, kita perlu memotong atau menyingkat nama panggilan.

Artikel ini akan memperkenalkan cara menggunakan uniapp untuk menentukan sama ada teks melebihi kawasan yang ditentukan dan cara memotong serta memaparkan lakaran kecil.

1 Sama ada untuk mendapatkan teks melebihi

Dalam uniapp, anda boleh menggunakan API applet WeChat untuk mendapatkan maklumat nod teks. Gunakan kaedah wx.createSelectorQuery() untuk mendapatkan nod halaman, kemudian gunakan kaedah select() untuk mendapatkan nod teks, dan akhirnya gunakan kaedah boundingClientRect() untuk mendapatkan kedudukan dan saiz nod.

Kod khusus adalah seperti berikut:

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

Melalui kod di atas, kita boleh mendapatkan maklumat lebar dan ketinggian nod teks. Seterusnya, kita boleh membandingkannya dengan lebar dan ketinggian bekas untuk menentukan sama ada teks melebihinya.

2. Pangkas teks

Apabila teks melebihi bekas, kami boleh memotong teks dan hanya memaparkan sebahagian daripada kandungan. Dalam uniapp, anda boleh menggunakan kaedah substr() atau kaedah slice() js untuk pemotongan.

Kod khusus adalah seperti berikut:

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

Dalam kod di atas, kami mengesan sama ada lebar nod teks melebihi lebar bekas sebanyak 200px Jika melebihi, kami kira aksara yang boleh dipaparkan nombor. Kemudian gunakan kaedah substr() untuk memotong teks dan menambah elipsis pada penghujungnya.

3. Paparan lakaran kecil teks

Selain memotong teks, kami juga boleh memaparkan kandungan lengkap melalui paparan lakaran kecil. Dalam uniapp, anda boleh menggunakan atribut limpahan teks CSS dan kata kunci elipsis untuk mencapai kesan lakaran kecil.

Kod khusus adalah seperti berikut:

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

Dalam kod di atas, kami menyembunyikan kandungan di luar bekas dengan menetapkan atribut limpahan bekas kepada tersembunyi. Kemudian gunakan atribut limpahan teks dan kata kunci elipsis untuk menambah elipsis dan gunakan atribut ruang putih untuk mengelakkan teks daripada dibalut.

Ringkasan

Dengan menggunakan gaya API dan CSS yang disediakan oleh uniapp dan applet WeChat, kami boleh menentukan dengan mudah sama ada teks melebihi, memotong teks dan memaparkan teks dalam lakaran kecil. Dalam pembangunan sebenar, memilih kaedah yang sesuai mengikut keperluan khusus boleh meningkatkan pengalaman pengguna aplikasi dengan berkesan.

Atas ialah kandungan terperinci Bagaimanakah uniapp menentukan sama ada teks melebihi kawasan yang ditentukan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!