微信小程序展开全文

最近需要做一个展示部分文字然后展开全文的功能，要求如下：

• 1、最多显示三行，文末使用省略号表示
• 2、文字显示1行，2行及文字不满三行时不要显示展开全文按钮

解决方案：

最开始设置显示4行，查询节点获取文字高度，如果是小于4行的高度，不显示展开，如果不是，设置显示3行，然后显示展开全文按钮。

• 1、为啥开始显示4行？
  我没找到判断文字刚好3行的方法。。。所以只能开始显示4行，这样如果需要显示展开全文，页面基本不会抖动。。。
• 2、查询节点高度的方法WXML节点信息API

      var query = wx.createSelectorQuery()
      query.select(".class").boundingClientRect(data => {
         
      }).exec()

这个方法要在，页面渲染完成后调用

• 3、如何判断高度小于4行
  试了好多次，发不同屏幕渲染出来的3行和4行高度是不一样的，把所有模拟器试了一遍，判断小于4行自己找个临界值还是可以做到的。把读取到的高度换算成rpx，自己找一个3行和4行高度的中间值。。。

var query = wx.createSelectorQuery()
      query.select(".des-short").boundingClientRect(data => {

        //获取屏幕宽度
        wx.getSystemInfo({
          success: res => {
            //console.log(res)

            //获取文字高度rpx
            let height = data.height * 750 / res.screenWidth

            //文字高度
            console.log(height)
          },
        })  
      }).exec()

• 4、如何限制显示固定行数,直接上代码

 <view class='des1'>
    <text>{{text3}}</text>
 </view>

.des1 {
  margin-left: 50rpx;
  margin-top: 30rpx;
  width: 650rpx;
  font-size: 26rpx;
  color: #484848;

  display: -webkit-box;            /* 定义为自适应布局 */
  word-break: break-all;           /* 换行模式 */
  text-overflow: ellipsis;         /* 超出文字用省略号代替 */
  overflow: hidden;                /* 多出部分隐藏 */
  -webkit-box-orient: vertical;    /* 竖直方向的超出和隐藏 */
  -webkit-line-clamp: 3;           /* 设定行数为3 */ 
}

最终代码:

• wmxl

<view class='container'>

  <!-- 例：少于三行 -->
  <view class='{{showTotal1 ? "des" : "des-short1 des-short"}}' style='-webkit-line-clamp: {{lineNum1}};'>
    <text>{{text1}}</text>
  </view>
  <view wx:if="{{showTotalBtn1}}" class='btn'>显示全部</view>

  <!-- 例：等于三行，但不超过三行 -->
  <view class='{{showTotal2 ? "des" : "des-short2 des-short"}}' style='-webkit-line-clamp: {{lineNum2}};'>
    <text>{{text2}}</text>
  </view>
  <view wx:if="{{showTotalBtn2}}" class='btn'>显示全部</view>

  <!-- 例：超过三行 -->
  <view class='{{showTotal3 ? "des" : "des-short3 des-short"}}' style='-webkit-line-clamp: {{lineNum3}};'>
    <text>{{text3}}</text>
  </view>
  <view wx:if="{{showTotalBtn3}}" class='btn' bindtap='showAll'>显示全部</view>
</view>

• wxss

.des {
  margin-left: 50rpx;
  margin-top: 30rpx;
  width: 650rpx;
  font-size: 26rpx;
  color: #484848;
}

.des-short {
  margin-left: 50rpx;
  margin-top: 30rpx;
  width: 650rpx;
  font-size: 26rpx;
  color: #484848;

  display: -webkit-box;            /* 定义为自适应布局 */
  word-break: break-all;           /* 换行模式 */
  text-overflow: ellipsis;         /* 超出文字用省略号代替 */
  overflow: hidden;                /* 多出部分隐藏 */
  -webkit-box-orient: vertical;    /* 竖直方向的超出和隐藏 */
  -webkit-line-clamp: 4;           /* 设定行数为4 */ 
}

.btn {
  margin-top: 10rpx;
  margin-left: 50rpx;
  color: lightseagreen;
  font-size: 26rpx;
}

• js

Page({
  data: {
    showTotal1: false,
    showTotal2: false,
    showTotal3: false,
  },
  onLoad: function() {

    wx.getSystemInfo({
      success: res => {
        console.log(res)
        //获取屏幕宽度
        this.data.screenWidth = res.screenWidth
      },
    })

    this.setData({
      text1: '我不是懒，我是享受不作为',
      text2: '微信小程序展开全文，解决方案，实现这个功能并不难，难的是开始没思路，。。。。。。怎么就凑不齐刚刚好两行半呢。。。',
      text3: `雅各布一个35岁的欧洲生产经理，每天为了解决各种问题从工厂的这一头跑到另一头，仅仅是为了保证生产能正常进行。雅各布清楚的知道如果想成为一名优秀的领导者，他必须为自己留有空余时间思考。为部门的战略布局所出谋划策，扩大业务。但每天的繁杂琐事让他无从顾忌。

那么雅各布应该如何增强企业内部各部门之间的合作呢？

如何预测这瞬息万变的市场呢？

那他的解决方法是什么呢？

也许像雅各布一样，你也正处于一个混乱期，有太多的事情要处理，而没有足够的时间去反思业务的变化情况以及去思考如何成为一名优秀的领导者。很多需要紧急处理的事情限制着你，让你没有办法去做那些更重要的事。但是在努力学会做好一个领导者的问题上，你面临着一个更大的挑战：那就是只有先行动起来，你才能知道关于自己，关于工作你需要做些什么，而不仅仅是思考。

作者：沐轻舟
链接：https://www.jianshu.com/p/6d51bade33b9
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。`,
    }, () => {
      let query1 = wx.createSelectorQuery()
      query1.select(".des-short1").boundingClientRect(data => {
        //获取屏幕宽度
        let height = data.height * 750 / this.data.screenWidth
        console.log(height)
        
        this.setData({
          lineNum1: 3,
          showTotalBtn1: height > 130 ? true : false 
        })
        
      }).exec()

      let query2 = wx.createSelectorQuery()
      query2.select(".des-short2").boundingClientRect(data => {
        //获取屏幕宽度
        let height = data.height * 750 / this.data.screenWidth
        console.log(height)

        this.setData({
          lineNum2: 3,
          showTotalBtn2: height > 130 ? true : false
        })
      }).exec()

      let query3 = wx.createSelectorQuery()
      query3.select(".des-short3").boundingClientRect(data => {
        //获取屏幕宽度
        let height = data.height * 750 / this.data.screenWidth
        console.log(height)

        this.setData({
          lineNum3: 3,
          showTotalBtn3: height > 130 ? true : false
        })
      }).exec()
    })
  },

  showAll: function() {
    this.setData({
      showTotal3: true,
      showTotalBtn3: false
    })
  },
})

设置130为临界值，是试了3行基本不超过120rpx，4行基本大于140rpx，取了个中间值

页面效果

未展开.png 已显示全部.png

没有做收起功能了，不过加上去很容易了。希望大家喜欢~~~

我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=150afwwtin5bq