浅谈如何利用小程序实现“全文收藏”功能

小程序如何实现“全文收藏”功能？下面这篇文章是小程序实现多行文字“全文收藏”功能的方法，希望对大家有所帮助！

小程序经常会遇到需要实现多行文本的“全文收藏”功能，一些关于掘金的搜索都是通过纯css实现的。亲测:ios很完美，但andriod无效。

小程序社区有很多方案。目前已经在社区看到一个大老板用js动态计算来实现了。亲测一般是有效的。测试后，在一些特殊情况下计算会有误差，所以我更改了一些代码。

首先，需求位于多行文本的右下角，显示“全文/折叠”按钮在展开和折叠两种状态之间切换。当文本没有超过指定的行数时，将显示“全文/折叠”按钮，数据将更新，文本不会折叠。二、变现思路1。多行文本截断主要用于line-clamp，主要样式如下。

。text -clamp 3 { overflow:hidden；显示器:-WebKit -盒子；-webkit-box-orient:垂直；-WebKit -line -clamp:3；}2.判断文本是否超过指定的行数，并显示全文包按钮以编写两段文本，一段显示完整的文本A，另一段显示用line-clamp省略的文本B。因为B已经被拦截了，所以B的高度比较小。通过比较两段文字的高度，可以知道文字是否超过两行。

在小程序中，可以使用wx.createSelectorQuery（）来获取文本高度。

射流研究…

const query = wx . createselectorquery（）。在（这）；query.selectAll（。showArea。hideArea“）。boundingClientRect（RES =》{ console . log（RES，& # 39；res & # 39)}).执行（）

三、代码实现1、第一个版本根据设计思路，立即启动代码。

foldable.wxml

{{content}} {{content}} {{onFold？unFoldText:onFoldText } } foldable . js

/* * *展开和折叠长文本内容* @param {String} content长文本内容* @param {Number} maxLine显示最大行数。

为了弥补这个坑，我介绍了lineHieght的属性。

//foldable . js component（{ properties:{ line hight:{ type:Number，observer（value）{ if（！(/^

通过分析代码，我们知道文本是在展开全文的状态下更新的。这时，山庄内。显示区域节点和。隐藏区域节点是一致的。如果代码让showFold = RES【0】。高度被执行时，它将返回false，因此按钮将消失。

所以解决方案是:

//如果文本超过最大行数并显示完整文本，则文本let on fold = false If（showarea height = = hideareaheight & & showarea height》max height）{ showfold = true on fold = true }再次更新，因此最终版本的checkFold方法为:

checkFold（）{ const query = this . createselectorquery（）；query.selectAll（。showArea。hideArea“）。bounding client rect（RES =》{ let show fold = RES【0】。高度《RES【1】。身高；const line height topx = this . changerpxtopx（this . data . line height）；//显示区域高度（即可能被截取的可见文本）const show area height = RES【0】。身高；//隐藏区域的高度（即完整文本的高度，会因意外事件而误算）const hidareheight = RES【1】。身高；text const max height的最大可见高度=行高topx * this . data . max line；//如果是一行文本，不小心算错了，如果（this。data . line height & & showarea height max height }//如果文本超过最大行数并显示完整文本，则文本let on fold = false If（showarea height = = hideareaheight & & showarea height》max height）{ showfold = true on fold = true }已再次更新。this . setdata（{ width:RES【0】。width，show fold，on fold，}）}）。exec（）}，IV。代码片段【相关学习推荐:小程序开发教程】

以上就是如何在小程序中实现“全文收藏”功能的细节。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 下面来说说小程序中页面传递参数的几种方式（微信小程序页面传递值）。
• 如何在小程序中实现下拉刷新和上拉加载功能？（附代码）（小程序的上拉加载触发器）
• 如何在小程序中创建页面二维码
• 如何通过applet vant组件将默认样式单元px转换为rpx（Vantui applet）
• 再来说说微信小程序中的生命周期（功能）（请谈谈小程序的生命周期功能？)

本文由主机参考刊发，转载请注明：浅谈如何利用小程序实现“全文收藏”功能 https://zhujicankao.com/104145.html