微信小程序文本查看更多和收起

微信小程序中，有时候文本需要实现这样的功能：

1、文本超过n行显示省略号
2、省略时，显示展开/收起按钮
3、文本不超过n行时，不显示省略号和展开/收起按钮

实现功能，记录此次开发经验，以便当做笔记查询。

实现思路：

文本过长显示省略号、展开和收起功能，通过css样式即可实现
判断是否显示展开/收起按钮：
通过嵌套元素，可以实现text既显示省略号，其高度又是全显示时的高度

通过SelectorQuery选择器，获取view及其父元素的高度，判断view高度是否超过其父元素高度，决定是否显示展开/收起按钮即可

结构

<view class="describe"><view class='{{readmore.status ? "hidden" : "content"}}'><view>{{introduce}}</view></view><view wx:if="{{colNumShow}}" class='readmore-tip' bindtap='toggle'>{{readmore.tip}}</view>
</view>

css，给文本设置行高，方便计算文本行数

.content {background: rgba(255, 255, 255, 1);
}.content view {width: 100%;font-size: 30rpx;font-weight: 400;color: rgba(0, 0, 0, 1);word-break: break-all;line-height: 40px;//行高，方便计算文本行数
}/* 超出3行隐藏多余部分并且显示省略号 */.hidden {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;line-height: 40px;//行高，方便计算文本行数
}.readmore-tip {padding-top: 30rpx;background: rgba(255, 255, 255, 1);text-align: right;font-size: 24rpx;font-weight: 400;color: rgba(128, 128, 128, 1);
}

js实现

获取数据，把数据全部渲染；获取当前文本的高度，除以行高计算行数，超过三行则隐藏

data:{readmore: {status: false,tip: '收起'},colNum:0,colNumShow:true,introduce:"我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容"
},onLoad: function(options) {this.getData();},getData(){//获取数据后渲染结构再计算文本行高获取数据//创建节点选择器var query = wx.createSelectorQuery//查询节点信息的对象query.select('.content').boundingClientRect();//添加节点的布局位置的查询请求query.exec( (res)=> { //执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回res[0].height;//   console.log("height==", res[0].height)var height = res[0].height;//25为css里设置的view的line-heightlet colNum = height/40;//40px为css里设置的view的line-height//   console.log("行数==", colNum )if(colNum > 3){self.setData({readmore: {status: true,tip: self.data.status ? '收起' : '查看更多'}})}else{self.setData({colNumShow:false})}self.setData({colNum: colNum,})},//切换toggle() {const status = this.data.readmore.statusthis.setData({readmore: {status: !status,tip: status ? '收起' : '查看更多'}})},

微信小程序文本查看更多和收起相关推荐

php点击查看更多,微信小程序加载更多和点击查看更多功能介绍
这篇文章主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 ...
HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法
微信小程序加载更多和点击查看更多的实现方法发布时间:2020-12-31 11:01:19 来源:亿速云阅读:126 作者:小新这篇文章给大家分享的是有关微信小程序加载更多和点击查看更多的实现方 ...
微信小程序-文本与图片无法对齐
最近项目开发小程序,于是打算重新做一遍七月老师的小程序入门项目,熟悉一下,但是做到阅读页面时却突然遇到了一个问题:文本与图片怎么都无法对齐,真的是对着代码研究了一个多小时才突然想到了原因,想想也许有人 ...
微信小程序文本、图片内容违规信息校验
首先放微信官方文档介绍:微信官方违规内容校验.翻到下面的健康运营指引>>内容安全解决方案,里面有包含文字内容.图片等信息校验,通过调用微信官方接口审核,保证了运营内容的绿色健康. 强调说 ...
安卓手机端口号怎么查看_微信小程序怎么查看手机便签待办事项?
手机便签是很多人常用的小工具,可以用来记录工作和生活中的待办事项.不过对于很多人来说,他们打开微信的频率,可比手机便签要多得多.那么,手机微信能不能直接查看便签里记录的待办事项呢?如果可以的话,又要怎 ...
微信小程序文本超出自动换行解决方案
使用场景:在一段文本中,显示的内容过多,超出原本设置的范围,现在需要将它进行分行显示. 实现方案: 前提:给 view或者 text 容器设置默认的 display: block 然后设置属性:tex ...
taro+vue微信小程序文本换行
文本换行在微信小程序中 br是不管用的无法识别解决方法:使用 \n 例子: <view>文本换行<text>{{ br }}</text>文本换行文本换行文本换 ...
微信小程序-时间轴/抽屉展开收起特效
微信小程序项目中用到的时间轴展示和抽屉展开收起特效本篇内容为原创,转载请注明出处. 一.效果图默认为展开状态 --- 左:展开:右:收起二.代码片段: 1.wxml部分 <view c ...
微信小程序文本输入＜textarea/＞详解
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序开发中,input 用来实现文本输入,是单行的,textarea是多行的输入实现 1 基本使用 <textarea ...

微信小程序文本查看更多和收起

微信小程序中，有时候文本需要实现这样的功能：

实现思路：

结构

css，给文本设置行高，方便计算文本行数

js实现

微信小程序文本查看更多和收起相关推荐

最新文章

热门文章