小程序 — 展开收起

小程序 — 展开收起,第1张

(1)首先我们定义一下html结构:

内容摘抄至马良《告坦白书》中我一段喜欢的文蚂坦尺字。

(2)less样式

(3)这样我们就实现了一个默认布局样式

(1)首先我们应该在 data 中定义一个变量 isShow 用来控制样式的切换,默认为收起状态(即不展示)。

(2)在箭头icon上添加一个点击事件,当点击的时候对闷高 isShow 做取反 *** 作;

(1)首先信码是image箭头图片的切换(注意是如何动态的切换本地图片的)

(2)然后我们定义一个展开的样式,根据isShow的状态值动态的切换样式

1、文本超过n行显示省略号

2、省略时,显示 展开/收起 按钮

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

文本是否显示省略号,通过css可以实现;

判断是否显镇衫示展开/收起按钮;

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

wx.createSelectorQuery() :返回一个 SelectorQuery 对象睁旅消实例。

SelectorQuery.exec(function callback) :执行所有的请求。请求结果按请求次序构成数组,在callback的第一个悉知参数中返回。

NodesRef.boundingClientRect(function callback) :添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。

js

wxss


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12561728.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-26
下一篇 2023-05-26

发表评论

登录后才能评论

评论列表(0条)

保存