微信小程序原生文字展开收起

如图所示，在小程序上会出现文字过于太多，显示不全的问题，所以做了一个展开收起的按钮

以下是代码

创建一个html

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

创建一个js文件

/**
 * 长文本内容展开与收起
 * @param {String} content  长文本内容
 * @param {Number} maxLine  最多展示行数[只允许 1-5 的正整数]
 * @param {String} position  展开收起按钮位置[可选值为 left right]
 * @param {Boolean} foldable  点击长文本是否展开收起
 * @param { String } onFoldText 收缩时文字
 * @param { String } unFoldText 展开时文字
 * @param { Number } LineHeight 文本的行高，单位是rpx--设计稿是以750为宽度
 * 注意：外部元素需要给定内容宽度，才能避免【showArea】【hideArea】的内容宽度不一致问题造成的展开文字的是否显示的错误
 * 
 */

Component({
    // options: {
    //   addGlobalClass: true
    // },
    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: "收起"
      },
      lineHeight: {
        type: Number,
        observer(value) {
          if (!(/^[0-9]*$/).test(value)) {
            throw new Error(`lineHeight field value can only be digits`)
          }
        }
      }
    },
    data: {
      width: null,
      onFold: false,
      showFold: false,
      onReady: false
    },
    lifetimes: {
      attached() {
        this.getNodeClientReact()
        this.setData({
          onReady: true
        })
      },
    },
    methods: {
      changeRpxToPx(rpxInteger) {
        return wx.getSystemInfoSync().windowWidth / 750 * rpxInteger
      },
      getNodeClientReact() {
        setTimeout(() => this.checkFold(), 100)
      },
      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()
      },
      handleFold() {
        this.setData({
          onFold: !this.data.onFold
        })
      }
    }
  })
  

然后把css样式复制以下

.content {
    /* background-color: #ffffff; */
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  
  .contentInner {
    word-break: break-all;
    width: 100%;
    color: #2f3033;
    font-size: 30rpx;
    line-height: 1.35;
    /* text-align: justify; */
  }
  
  .hideArea {
    display: -webkit-box;
    overflow: hidden;
    /* position: fixed;
    top: 100vh;
    left: -100vw; */
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    color: #fff;
  }
  
  .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;
  }
  
  .flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  
  .flex-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
  }
  
  .flex-alignStart {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: flex-start;
    -webkit-align-items: flex-start;
  }
  
  .flex-alignCenter {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
  }
  
  .flex-alignEnd {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: flex-end;
    -webkit-align-items: flex-end;
  }
  
  .flex-between {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
  }
  
  .flex-around {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
  }
  
  .flex-middle {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
  }
  
  .flex-end {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
  }

然后在需要调用的组件里面调用就行了，我这边是做了一个朋友圈的功能，所以需要for循环一下，

  <view class='main' wx:for="{{list}}" wx:key="index" wx:for-item="item">
    <view class='nickname'>{{item.creator}}</view>
    <view class="frcont">
      <custom-content content="{{item.actionContent}}" maxLine="{{item.maxline}}" lineHeight="{{40}}" position="{{item.position}}" foldable="{{item.foldable}}"></custom-content>
      <view class='imgArea' >
        <view class="vieImg" wx:for="{{item.actionimg}}" wx:key="index" wx:for-item="item2">
          <image src="{{item2}}"/>
        </view>
      </view>
      <view class="time">{{item.createDate}}</view>
    </view>
  </view>

父组件的js

list: [
	{
		id:1,
		creator: '',
		actionContent: "成功的人生才是完美的人生 成功的人生是努力的人生，是无任何遗憾的人生，是目标明确并为之奋斗的人生，是会把握机遇的人生。哈佛大学对于人生成功曾做过科学的系统的调查和验证，认为人生",
	   	maxline: 2,
	   	position: "right",
	   	foldable: true,
	   	createDate: '',
	   	actionimg: []
	}
]