版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_25324335/article/details/83687550
我们知道,当一大段文字显示在一个页面且其不是作为最主要内容展示的时候,通常只会显示前几行,如果用户想要看全部,那么他可以点击“查看全部”按钮来查看所有内容。这里介绍在小程序中完成该功能。
先看演示:
思路
- 确定好显示的最大行数,然后写出隐藏多余文本的样式用于切换
- 判断文字的内容是否超出事先定义的行数
- 给“查看更多”按钮绑定事件,切换样式与提示文字
代码实现
页面 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。