微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
针对这个功能,产品的需求如下
由于我们项目是教育类产品所以这里这个功能会用在发动态这里,就像微信朋友圈那样,我们叫班级圈。
用户发班级圈时,可以发布文字内容、图片、视频,文字可以输入500个字。这样的话,如果列表一次展示全部文字,如果用户真有500个文字就基本一条动态占用了整屏高度,对于用户体验来说,用户一眼看到的东西太少了,所以产品就提出了需要折叠文字需求,并说明文字需要满6行的时候折叠,并显示全文按钮,当用户点击全文按钮时要展开所有内容,当点击收起按钮又变回折叠状态。
说完需求,现在来说说问题
首先,开发过小程序的朋友都知道,小程序内部是无法操作dom的,也就是说根本没有dom这个东西。
但是,需求是需要内容满足6行,并且满足6行后才显示全文按钮,才可以操作,如果是不满足六行的,是不应该显示全文按钮的,直接正常展示就行,这里问题就来了。
如何折叠文本,让文本超出隐藏?
如果小程序不能操作dom,如何判断显示全文按钮?
我的解决方案
第一个问题
其实第一个问题不是问题,因为我们都知道文本多行超出隐藏是可以直接使用css就能解决的,所以下面我就直接贴出实现代码
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
第二个问题
下面我们来说说第二个问题,如何去判断满足6行就显示全文按钮。
虽说小程序是不能操作dom的,但是能不能获取到dom的一些信息呢?
答案是可以的,小程序API确实提供了一套能够去获取节点上的一些信息接口,接口名叫createSelectorQuery,创建一个选择器对象,通过选择器对象提供的方法去做一些操作,这里我们需要用到选择器对象的两个方法
select('css selector')
boundingClientRect(fn)
首先,通过select去选择我们需要获取信息的节点,参数是css的选择器,只能选择单个节点,如果需要选择多个节点可使用selectAll。然后再通过boundingClientRect方法查询布局的位置请求,相对于显示区域,以像素为单位。其功能类似于DOM的getBoundingClientRect。
该方法参数可接受一个回调,回调参数接受一个查询到的信息对象,其对象有以下信息
id :节点ID