微信小程序原生文字展开收起_小程序文本展开收起按钮

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

以下是代码

创建一个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>
1
2
3
4
5
6
7

创建一个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
        })
      }
    }
  })
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

然后把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;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

然后在需要调用的组件里面调用就行了，我这边是做了一个朋友圈的功能，所以需要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>
1
2
3
4
5
6
7
8
9
10
11
12

父组件的js

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