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

我们知道,当一大段文字显示在一个页面且其不是作为最主要内容展示的时候,通常只会显示前几行,如果用户想要看全部,那么他可以点击“查看全部”按钮来查看所有内容。这里介绍在小程序中完成该功能。
先看演示:
微信小程序开发笔记3——文字的查看更多的效果_第1张图片

思路

  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。

你可能感兴趣的:(前端,微信小程序,微信小程序踩坑指南)