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

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

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

思路

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

代码实现

页面 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 = thisquery.select(".content").boundingClientRect(function (res) {const lineHeight = 18const height = res.heightconst status = "readmore.status"self.setData({[status]: height / lineHeight > 3})}).exec()},toggle() {const status = this.data.readmore.statusthis.setData({readmore: {status: !status,tip: status ? '收起' : '更多'}})},
})

github

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

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

微信小程序开发笔记，你收藏了吗？
** 微信小程序开发笔记,你收藏了吗? ** 最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看. 开发小程序开发工具推荐vscode写代码,微信开发工具用于查看效果 ...
微信小程序开发笔记—设置页面密码
文章目录一.功能概述二.实现效果三.实现方法 1.新建个人登陆页面 2.设计密码获取判别函数和响应函数 1)定义变量 2)设计密码获取判别函数 3)设计响应函数 3.设计页面内容 1)input ...
微信小程序开发笔记进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.云函数五.程序流程一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
微信小程序开发笔记进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
微信小程序开发笔记——wsdchong
微信小程序开发笔记一.小程序简介小程序起源于微信的webview:此类API最初是提供给腾讯内部一些业务使用,很多外部开发者发现后,照葫芦画瓢,逐渐成为微信中网页的事实标准.2015年初,微信发布 ...
微信小程序开发笔记进阶篇③——onfire.js事件订阅和发布在微信小程序中的使用
文章目录一.前言二.onfire.js介绍三.API介绍四.实例应用五.onfire源码六.实例源码一.前言微信小程序开发笔记--导读二.onfire.js介绍一个简单实用的事件订 ...
微信小程序开发笔记进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记支付篇②——微信小程序通过小程序云实现微信支付功能
文章目录一.前言二.开通微信支付 2.1 关联商户号 2.2 添加商户号 2.3 管理员授权三.云函数开发 3.1 新建云函数 3.2 云函数代码 3.3 云函数上传并部署四.小程序调用 4. ...