微信小程序文本展开、收起功能

微信小程序文本展开、收起功能,第1张

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

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

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

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

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

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

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

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

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

js

wxss

wx.createInnerAudioContext()里面有个属性volume,但是这个只能控兄型制相对手游胡机媒体音量的大小,如果我手机媒体音量设置为0,那神尘拦么即使我volume = 1 也是没有声音

使用微信小程序实现一个简易的音乐播放器.

Github地址

虽然界面很简单,但是一个音频播放器该有的功能大部分都有了(没有歌词显示功能).

主要实现的功历悄咐能有:

1.实现音频播放,暂停

2.实现拖拽进度条,快进音频肢纯进度

3.实现上一首,下一首,列表循环播放

4.实现关闭小程序,也可在后台播放,正式版需要通过审核,开发版本可正常测试

一丶index.js

二丶index.wxml

三丶index.wxss

四丶要实现关闭小程序后,依然后台播放,微信顶部悬浮展示,需要再app.json配置requiredBackgroundModes属性

附上官方相关api链接:

BackgroundAudioManager.html

wx.getBackgroundAudioManager()

slider组运早件


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存