微信小程序实现多行文字隐藏（折叠），展出功能

 

目录

最终效果

代码

引用组件

结束语

---

最终效果

文本隐藏设置四行

 

代码

组件化，新建一个组件

• 组件的js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    intro:{
      type:String,
      observer: function (e) {
        this.setData({
          data:this.data.intro
        })
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
      if_show:true, //是否显示折叠隐藏按钮
      if_hide:true, //是否折叠，true为折叠
      data:'',
  },

  /**
   * 组件的方法列表
   */
  methods: {
    change:function(e){
      this.setData({
        if_hide:!this.data.if_hide
      })
    }
  },
  ready:function(e){
    let that = this
    wx.createSelectorQuery().in(this).select('#my_intro').boundingClientRect(function(rect){
      console.log(rect)
     if(rect.height==80){   //每行设置的20px，因为每个设备的像素比不一样不用rpx，用px，当然也可以先得到像素比再处理
        that.setData({
          if_show:true
        })
     }else{
      that.setData({
        if_show:false
      })
     }
    }).exec()
  }
})

• 组件的wxss和wxml，最主要的就是这两个

.line {
  margin-left: 24rpx;
  min-height: 20px;
  line-height: 20px;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: normal;
  color: #939AA3;
  mix-blend-mode: normal;
  font-size: 26rpx;
  width: 584rpx;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:4;/*设置 需要显示的行数*/
}
.line_ {
  margin-left: 24rpx;
  min-height: 20px;
  line-height: 20px;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: normal;
  color: #939AA3;
  mix-blend-mode: normal;
  font-size: 26rpx;
  width: 584rpx;
}

<view class='outwell'>
    <view class='title'>
        <view class='wenben'>一些内容</view>
        <view class='hidden_or_show' bindtap="change" wx:if="{{if_show}}">
            <text class="ico_text">{{if_hide?'展开':'折叠'}}</text>
            <image class='school_icon' src="{{if_hide?'../image/show.png':'../image/hiden.png'}}"></image>
        </view>
    </view>
    <view class='outwell_detail'>
      <view class="{{if_hide?'line':'line_'}}" id="my_intro">{{data}}</view>
    </view>
</view>

 

 

两个图标放在这个

引用组件

<hideIntro intro="大家好，本人性格积极乐观，兴趣广泛，专业能力扎实，团队协作能力强，各种优点都沾一点。测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度"></hideIntro>

<hideIntro intro="本人性格积极乐观，测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度"></hideIntro>

结束语

有一点小问题，比如不满四行（没出现省略号）也会出现右上方的折叠展开图标，但对于实际的使用没啥影响。