当前位置:   article > 正文

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

小程序文本展开收起按钮

如图所示,在小程序上会出现文字过于太多,显示不全的问题,所以做了一个展开收起的按钮
在这里插入图片描述
以下是代码

创建一个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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/77111
推荐阅读
相关标签
  

闽ICP备14008679号