미니 프로그램이 '전체 텍스트 축소' 기능을 구현하는 방법에 대해 이야기해 보겠습니다.

미니 프로그램에서 "전체 텍스트 접기" 기능을 어떻게 구현하나요? 다음은 여러 줄 텍스트의 "전체 텍스트 축소" 기능을 구현하는 작은 프로그램입니다. 모든 사람에게 도움이 되기를 바랍니다.

작은 프로그램에서 여러 줄 텍스트의 "전체 텍스트 축소" 기능을 구현해야 하는 경우가 종종 있습니다. Nuggets에서 검색한 결과 순수한 CSS를 사용하여 구현할 수 있다는 것을 알았습니다. 개인 테스트: iOS에서는 완벽하지만, andriod에서는 작동하지 않습니다.

작은 프로그램 커뮤니티에는 많은 솔루션이 있습니다. 현재 커뮤니티에서 js 동적 계산을 사용하여 구현 방법을 알려주는 큰 사람을 보았습니다. 테스트 후에는 일반적으로 효과적입니다. 경우 계산에 오류가 발생하므로 일부 코드가 변경되었습니다.

1. 요구 사항

• 여러 줄 텍스트의 오른쪽 하단에 있는 "전체 텍스트/접기" 버튼을 표시하세요
• "확장"과 "접기" 상태 간 전환
• 텍스트가 지정된 행 수, 없음 "전체 텍스트/접기" 버튼 표시
• 텍스트 표시 [전체 텍스트] 표시 상태에서 데이터가 업데이트되고 텍스트가 접히지 않습니다

2. 구현 아이디어

1. -line text truncation

line-clamp에 주로 사용되는 키 스타일은 다음과 같습니다

.text-clamp3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

2. 텍스트가 지정된 줄 수를 초과하는지 확인하고 전체 텍스트 축소 버튼을 표시합니다

2개를 씁니다. 하나는 전체 텍스트 A를 표시하고 다른 하나는 line-clamp를 사용하여 표시합니다. 생략된 텍스트 B는 B가 가로채기 때문에 B의 높이가 상대적으로 작습니다. 두 텍스트의 높이를 비교하면 텍스트가 두 줄을 초과하는지 알 수 있습니다

미니 프로그램에서 wx.createSelectorQuery()를 사용하여 텍스트 높이를 얻을 수 있습니다wx.createSelectorQuery()获取文本高度

js

const query = wx.createSelectorQuery().in(this);
query.selectAll(".showArea, .hideArea").boundingClientRect(res => {
console.log(res, 'res')
}).exec()

三、代码实现

1、初次版本

根据设计思路，立马上手代码

foldable.wxml

<view class="content">
  <view class="contentInner content-inner-class showArea {{!onFold ? &#39;text-clamp&#39; + maxLine : &#39;&#39;}}">{{content}}</view>
  <view class="contentInner content-inner-class hideArea" style="width: {{width}}px">{{content}}</view>
  <view class="foldInner fold-class {{position === &#39;right&#39; ? &#39;flex-end&#39; : &#39;flex&#39;}}" wx:if="{{showFold}}">
    <text class="fold" catchtap="handleFold">{{onFold ? unFoldText : onFoldText}}</text>
  </view>
</view>

foldable.js

/**
 * 长文本内容展开与收起
 * @param {String} content  长文本内容
 * @param {Number} maxLine  最多展示行数[只允许 1-5 的正整数]
 * @param {String} position  展开收起按钮位置[可选值为 left right]
 * @param {Boolean} foldable  点击长文本是否展开收起
 * @param { String } onFoldText 收缩时文字
 * @param { String } unFoldText 展开时文字
 *
 */

Component({
  externalClasses: ['content-inner-class', 'fold-class'],
  properties: {
    content: {
      type: String,
      observer(val) {
        if (this.data.onReady) {
          this.getNodeClientReact()
        }
      }
    },
    maxLine: {
      type: Number,
      value: 1,
      observer(value) {
        if (!(/^[1-5]$/).test(value)) {
          throw new Error(`maxLine field value can only be digits (1-5), Error value: ${value}`)
        } else if (this.data.onReady) {
          this.getNodeClientReact()
        }
      }
    },
    position: {
      type: String,
      value: "left"
    },
    foldable: {
      type: Boolean,
      value: true
    },
    // 收缩时文字
    onFoldText: {
      type: String,
      value: "全文"
    },
    // 展开时文字
    unFoldText: {
      type: String,
      value: "收起"
    },
  },
  data: {
    width: null,
    onFold: false,
    showFold: false,
    onReady: false
  },
  lifetimes: {
    attached() {
      this.getNodeClientReact()
      this.setData({
        onReady: true
      })
    },
  },
  methods: {
    getNodeClientReact() {
      setTimeout(() => this.checkFold(), 10)
    },
    checkFold() {
      const query = this.createSelectorQuery();
      query.selectAll(".showArea, .hideArea").boundingClientRect(res => {
        let showFold = res[0].height < res[1].height;
        this.setData({
          width: res[0].width,
          showFold,
        })
      }).exec()
    },
    handleFold() {
      this.setData({
        onFold: !this.data.onFold
      })
    }
  }
})

foldable.wxss

.content {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.contentInner {
  word-break: break-all;
  width: 100%;
  color: #2f3033;
  font-size: 30rpx;
  line-height: 1.35;
}

.hideArea {
  display: -webkit-box;
  overflow: hidden;
  position: fixed;
  top: 100vh;
  left: -100vw;
}

.foldInner {
  padding-top: 10rpx;
  color: #6676bd;
  font-size: 32rpx;
}

.foldInner .fold {
  cursor: pointer;
}

.text-clamp1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.text-clamp2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.text-clamp3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.text-clamp4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.text-clamp5 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

2、修复版本

正常情况下，此方法可行，但是在级别文字下，会计算错误。经过测试，可将 节点是.hideArea的内容定位在.showArea节点下可解决

foldable.wxss

.hideArea {
  display: -webkit-box;
  overflow: hidden;
  /* position: fixed;
  top: 100vh;
  left: -100vw; */
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  color: #fff;
}

3、增强版本

经过修复之后，本来是可以完美实现了，但是在测试过程中，第一次正常渲染是没有问题。但如果文本数据更新，会发现如果原来的文本从一行增加到两行时，使用wx.createSelectorQuery()计算的高度会有存在是实际高低的两倍的现象。导致会错误出现【全文】文字。然后文本从两行增加到三行或者多行都没问题，不太理解为什么会出现这个错误计算的现象。（期待大神能留言告知 ? ）

为了弥补这个坑，我引入了lineHieght这个属性。

// foldable.js
Component({
    properties: {
        lineHieght: {
          type: Number,
          observer(value) {
            if (!(/^[0-9]*$/).test(value)) {
              throw new Error(`lineHieght field value can only be digits`)
            }
          }
        }
    }
})

通过lineHieght和最多可展示行数maxLine可以计算出，可在界面展示的最大高度。

// 文本可见的最大高度
const maxHeight = this.data.lineHieght * this.data.maxLine;

当然了，我们也需要适配不同的设备，而且通过wx.createSelectorQuery()计算出来的结果是以px为单位的。

所以，行高需要根据设备尺寸去改变。因为我们是以宽度是750px尺寸为设计稿的，所以根据wx.getSystemInfoSync()可以获取设备信息，进而转换成px的尺寸。

// foldable.js
changeRpxToPx(rpxInteger) {
  return wx.getSystemInfoSync().windowWidth / 750 * rpxInteger
},

因此，更新checkFold方法

checkFold() {
  const query = this.createSelectorQuery();
  query.selectAll(".showArea, .hideArea").boundingClientRect(res => {
    let showFold = res[0].height < res[1].height;
    const lineHeightToPx = this.changeRpxToPx(this.data.LineHeight);
    // 展示区域高度（即是可能会被截取的可见文字）
    const showAreaHeight = res[0].height;
    // 隐藏区域的高度（即是完整文本高度，偶然事件会计算错误）
    const hideAreaHeight = res[1].height;
    // 文本可见的最大高度
    const maxHeight = lineHeightToPx * this.data.maxLine;
    // 如果是一行文字，偶然计算错误，用行高判断
    if (this.data.LineHeight && showAreaHeight <= maxHeight) {
      showFold = hideAreaHeight > maxHeight
    }
    this.setData({
      width: res[0].width,
      showFold,
    })
  }).exec()
},

4、最终版本

经过上一个版本，基本功能都已经实现。但是，如果文本超过最大行数，并且在展开全文的情况下，更新了文本，此时，全文/展开按钮会展示错误。

通过分析代码可知，在展开全文的状态下更新了文本，此时.showArea节点和.hideArea节点的高度一致，执行代码let showFold = res[0].height < res[1].height;，会返回false，因此按钮会消失。

因此解决方案为：

// 如果文本超出最大行数，并且是显示全文的状态下，再次更新了文字
let onFold = false
if (showAreaHeight == hideAreaHeight && showAreaHeight > maxHeight) {
  showFold = true
  onFold = true
}

所以最终版本的checkFold

js

checkFold() {
  const query = this.createSelectorQuery();
  query.selectAll(".showArea, .hideArea").boundingClientRect(res => {
    let showFold = res[0].height < res[1].height;
    const lineHeightToPx = this.changeRpxToPx(this.data.LineHeight);
    // 展示区域高度（即是可能会被截取的可见文字）
    const showAreaHeight = res[0].height;
    // 隐藏区域的高度（即是完整文本高度，偶然事件会计算错误）
    const hideAreaHeight = res[1].height;
    // 文本可见的最大高度
    const maxHeight = lineHeightToPx * this.data.maxLine;
    // 如果是一行文字，偶然计算错误，用行高判断
    if (this.data.LineHeight && showAreaHeight <= maxHeight) {
      showFold = hideAreaHeight > maxHeight
    }
    // 如果文本超出最大行数，并且是显示全文的状态下，再次更新了文字
    let onFold = false
    if (showAreaHeight == hideAreaHeight && showAreaHeight > maxHeight) {
      showFold = true
      onFold = true
    }
    this.setData({
      width: res[0].width,
      showFold,
      onFold,
    })
  }).exec()
},

3. 코드 구현

1. 첫 번째 버전

🎜디자인 아이디어에 따라 바로 코딩 시작🎜🎜🎜foldable.wxml🎜 🎜rrreee🎜🎜foldable.js🎜 🎜rrreee🎜🎜foldable.wxss🎜🎜rrreee

🎜2. 수정된 버전🎜🎜🎜일반적인 상황에서는 이 방법이 작동하지만 레벨 텍스트에서는 작동합니다. , 계산 오류가 발생합니다. 테스트 후 .showArea node🎜🎜🎜foldable.wxss🎜🎜rrreee

.hideArea 노드의 콘텐츠를 배치하여 솔루션을 해결할 수 있습니다. ="heading -7">🎜3.Enhanced version🎜🎜🎜수리 후에는 완벽하게 구현이 가능했는데, 테스트를 해보니 첫 번째 정상 렌더링에는 문제가 없었습니다. 하지만 텍스트 데이터를 업데이트하면 원본 텍스트가 한 줄에서 두 줄로 늘어나면 wx.createSelectorQuery()를 사용하여 계산된 높이가 실제 높이의 2배가 된다는 것을 알 수 있습니다. 결과적으로 [전체 텍스트] 텍스트가 잘못 표시됩니다. 그러면 텍스트가 두 줄에서 세 줄 이상으로 아무 문제 없이 늘어납니다. 왜 이런 계산 오류가 발생하는지 모르겠습니다. (마스터님이 알려달라고 메시지를 남겨주셨으면 좋겠습니다.)🎜🎜🎜🎜이 함정을 보완하기 위해 lineHieght 속성을 ​​도입했습니다. 🎜rrreee🎜인터페이스에 표시할 수 있는 최대 높이는 lineHieght와 표시되는 최대 줄 수 maxLine을 통해 계산할 수 있습니다. 🎜rrreee🎜물론 다양한 기기에도 적응해야 하는데 wx.createSelectorQuery()를 통해 계산된 결과는 px에 있습니다. 🎜🎜그래서 기기 크기에 따라 행 높이를 변경해야 합니다. 너비 750px를 디자인 초안으로 사용하기 때문에 wx.getSystemInfoSync()에 따라 기기 정보를 얻은 후 px로 변환할 수 있습니다. 코드> 크기. 🎜rrreee🎜 따라서 checkFold 메소드를 업데이트하세요🎜rrreee

🎜4. 최종 버전🎜🎜🎜이전 버전에 이어 기본 기능이 구현되었습니다. 그러나 텍스트가 최대 줄 수를 초과하여 전체 텍스트가 확장된 상태에서 텍스트가 업데이트되면 전체 텍스트/확장 버튼에 오류가 표시됩니다. 🎜🎜🎜🎜🎜🎜보실 수 있습니다 코드를 분석하면 전체 텍스트가 확장된 상태로 텍스트가 업데이트됩니다. 이때 .showArea 노드와 .hideArea 노드의 높이가 일치합니다. . let showFold = res[0] .height 코드를 실행하면 <code>false가 반환되므로 버튼이 사라집니다. 🎜🎜해결책은 다음과 같습니다.🎜rrreee🎜checkFold 메서드의 최종 버전은 다음과 같습니다.🎜rrreee🎜Four. 코드 조각🎜🎜🎜많은 테스트와 수정 끝에 마침내 코드 조각이 첨부됩니다. 🎜🎜 https://developers.weixin.qq.com/s/GWj19vmC7oxp🎜

더 좋은 제안이 있으시면 메시지 남겨주세요~~

[관련 학습 추천 : Mini 프로그램 개발 튜토리얼]

위 내용은 미니 프로그램이 '전체 텍스트 축소' 기능을 구현하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!