微信小程序开发笔记3——文字的查看更多的效果

博客更新地址啦～，欢迎访问：https://jerryyuanj.github.io/blog

我们知道，当一大段文字显示在一个页面且其不是作为最主要内容展示的时候，通常只会显示前几行，如果用户想要看全部，那么他可以点击“查看全部”按钮来查看所有内容。这里介绍在小程序中完成该功能。
先看演示：

思路

1. 确定好显示的最大行数，然后写出隐藏多余文本的样式用于切换
2. 判断文字的内容是否超出事先定义的行数
3. 给“查看更多”按钮绑定事件，切换样式与提示文字

代码实现

页面 wxml

<view class='readmore'>
  <view class='overview'>
  <view class='title-tip'>今日NBA头条</view>
  <view class='content {{readmore.status ? "hidden" : ""}}'>
    比赛还没结束，罗斯还是比赛的主宰，他突破上篮打进反超，
    篮下的勾手命中为森林狼取得2分的领先，罗斯得到了全场球迷MVP的喊声，看哭了苍天。
    最后时刻，罗斯站上罚球线，两次罚球稳稳的命中，50分，新的里程碑，罗斯成为这个夜晚的主宰。
    就在暂停的时候，罗斯把所有队友聚集起来，激励着大家，看出罗斯的领袖气质。最后一次防守，又是罗斯，他封盖了爵士的最后一次出手，为森林狼拿到了比赛的胜利。
  </view>
  <view class='readmore-tip' bindtap='toggle'>{{readmore.tip}}</view>
</view>

</view>

页面 wxss

.readmore{
  margin: 50rpx;
}

.overview {
  padding: 0 60rpx;
}

.title-tip {
  font-size: 28rpx;
  margin-bottom: 22rpx;
}

.content {
  font-size: 24rpx;
}
/* 超出3行隐藏多余部分并且显示省略号 */
.hidden{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.readmore-tip {
  color: #196a99;
  font-size: 28rpx;
  margin-top: 30rpx;
}

页面 js

这里如何判断文字超出三行呢？我们可以通过微信提供的WXML相关的API获取整个段落的高度，然后再除以行高，就得到了行数。用这个行数跟我们定义好的行数(3)做比较，如果大于3，那么切换成隐藏多余的文字的样式，反之正常显示全部。
PS: 我查了小程序的文档，没有找到可以获取到文字行高的相关api。所以这里的行高我是写死的。

Page({
  data: {
    readmore: {
      status: false,
      tip: '查看更多'
    }
  },
  onReady() {
    const query = wx.createSelectorQuery()
    let self = this
    query.select(".content").boundingClientRect(function (res) {
      const lineHeight = 18
      const height = res.height
      const status = "readmore.status"
      self.setData({
        [status]: height / lineHeight > 3
      })
    }).exec()
  },
  toggle() {
    const status = this.data.readmore.status
    this.setData({
      readmore: {
        status: !status,
        tip: status ? '收起' : '更多'
      }
    })
  },
})

github

demo地址：https://github.com/JerryYuanJ/mini-app-pratice
如果对你有帮助，欢迎star。或者你发现bug也欢迎issue。