当前位置： 代码网 > 移动>腾讯>微信 > 聊聊小程序怎么实现“全文收起”功能

聊聊小程序怎么实现“全文收起”功能

2025年03月30日 • 微信 •我要评论
小程序怎么实现“全文收起”功能？下面本篇文章小程序实现多行文本“全文收起”功能的方法，希望对大家有所帮助！小程序里经常会碰到需要实现多行文本”全文收起“功能，在掘金上有搜索到用纯css实现。亲测：io

小程序怎么实现“全文收起”功能？下面本篇文章小程序实现多行文本“全文收起”功能的方法，希望对大家有所帮助！

聊聊小程序怎么实现“全文收起”功能

小程序里经常会碰到需要实现多行文本”全文收起“功能，在掘金上有搜索到用纯css实现。亲测：ios很完美，andriod上的无效。

小程序社区有很多方案，目前在社区有看到一位大佬使用js动态计算告诉去实现，亲测大致有效果，测试后，在一些特殊情况下，计算会有误差，所以有更改些许代码。

一、需求

  • 位于多行文本右下角，展示”全文/收起“按钮
  • “展开”和“收起”两种状态的切换
  • 当文本不超过指定行数时，不显示”全文/收起“按钮
  • 文本显示【全文】展示状态下，更新数据，文本不被收起

二、实现思路

1、多行文本截断

主要用到用到 line-clamp，关键样式如下

.text-clamp3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
登录后复制

2、判断文本是否超出指定行数，显示全文 收起 按钮

编写两段文本，一段展示完整的文本a，一段展示使用 line-clamp省略后的文本b，因为b有被截取，因此b的高度相对较小。对比两段文本的高度，便可以知道文本是否超出两行

在小程序里，可以使用wx.createselectorquery()获取文本高度

js

const query = wx.createselectorquery().in(this);
query.selectall(".showarea, .hidearea").boundingclientrect(res => {
console.log(res, 'res')
}).exec()
登录后复制

1.png

三、代码实现

1、初次版本

根据设计思路，立马上手代码

foldable.wxml

<view>
  <view>{{content}}</view>
  <view>{{content}}</view>
  <view>
    <text>{{onfold ? unfoldtext : onfoldtext}}</text>
  </view></view>
登录后复制

foldable.js

/**
 * 长文本内容展开与收起
 * @param {string} content  长文本内容
 * @param {number} maxline  最多展示行数[只允许 1-5 的正整数]
 * @param {string} position  展开收起按钮位置[可选值为 left right]
 * @param {boolean} foldable  点击长文本是否展开收起
 * @param { string } onfoldtext 收缩时文字
 * @param { string } unfoldtext 展开时文字
 * 
 */

component({
  externalclasses: ['content-inner-class', 'fold-class'],
  properties: {
    content: {
      type: string,
      observer(val) {
        if (this.data.onready) {
          this.getnodeclientreact()
        }
      }
    },
    maxline: {
      type: number,
      value: 1,
      observer(value) {
        if (!(/^[1-5]$/).test(value)) {
          throw new error(`maxline field value can only be digits (1-5), error value: ${value}`)
        } else if (this.data.onready) {
          this.getnodeclientreact()
        }
      }
    },
    position: {
      type: string,
      value: "left"
    },
    foldable: {
      type: boolean,
      value: true
    },
    // 收缩时文字
    onfoldtext: {
      type: string,
      value: "全文"
    },
    // 展开时文字
    unfoldtext: {
      type: string,
      value: "收起"
    },
  },
  data: {
    width: null,
    onfold: false,
    showfold: false,
    onready: false
  },
  lifetimes: {
    attached() {
      this.getnodeclientreact()
      this.setdata({
        onready: true
      })
    },
  },
  methods: {
    getnodeclientreact() {
      settimeout(() =&gt; this.checkfold(), 10)
    },
    checkfold() {
      const query = this.createselectorquery();
      query.selectall(".showarea, .hidearea").boundingclientrect(res =&gt; {
        let showfold = res[0].height <p><strong>foldable.wxss</strong></p><pre class="brush:js;toolbar:false;">.content {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.contentinner {
  word-break: break-all;
  width: 100%;
  color: #2f3033;
  font-size: 30rpx;
  line-height: 1.35;
}

.hidearea {
  display: -webkit-box;
  overflow: hidden;
  position: fixed;
  top: 100vh;
  left: -100vw;
}

.foldinner {
  padding-top: 10rpx;
  color: #6676bd;
  font-size: 32rpx;
}

.foldinner .fold {
  cursor: pointer;
}

.text-clamp1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.text-clamp2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.text-clamp3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.text-clamp4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.text-clamp5 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
登录后复制

2、修复版本

正常情况下，此方法可行，但是在级别文字下，会计算错误。经过测试，可将 节点是.hidearea的内容定位在.showarea节点下可解决

foldable.wxss

.hidearea {
  display: -webkit-box;
  overflow: hidden;
  /* position: fixed;
  top: 100vh;
  left: -100vw; */
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  color: #fff;
}
登录后复制

3、增强版本

经过修复之后，本来是可以完美实现了，但是在测试过程中，第一次正常渲染是没有问题。但如果文本数据更新，会发现如果原来的文本从一行增加到两行时，使用wx.createselectorquery()计算的高度会有存在是实际高低的两倍的现象。导致会错误出现【全文】文字。然后文本从两行增加到三行或者多行都没问题，不太理解为什么会出现这个错误计算的现象。（期待大神能留言告知 ? ）

2.png

为了弥补这个坑，我引入了linehieght这个属性。

// foldable.js
component({
    properties: {
        linehieght: {
          type: number,
          observer(value) {
            if (!(/^[0-9]*$/).test(value)) {
              throw new error(`linehieght field value can only be digits`)
            }
          }
        }
    }
})
登录后复制

通过linehieght和最多可展示行数maxline可以计算出，可在界面展示的最大高度。

// 文本可见的最大高度
const maxheight = this.data.linehieght * this.data.maxline;
登录后复制

当然了，我们也需要适配不同的设备，而且通过wx.createselectorquery()计算出来的结果是以px为单位的。

所以，行高需要根据设备尺寸去改变。因为我们是以宽度是750px尺寸为设计稿的，所以根据wx.getsysteminfosync()可以获取设备信息，进而转换成px的尺寸。

// foldable.js
changerpxtopx(rpxinteger) {
  return wx.getsysteminfosync().windowwidth / 750 * rpxinteger
},
登录后复制

因此，更新checkfold方法

checkfold() {
  const query = this.createselectorquery();
  query.selectall(".showarea, .hidearea").boundingclientrect(res =&gt; {
    let showfold = res[0].height  maxheight
    }
    this.setdata({
      width: res[0].width,
      showfold,
    })
  }).exec()
},
登录后复制

4、最终版本

经过上一个版本，基本功能都已经实现。但是，如果文本超过最大行数，并且在展开全文的情况下，更新了文本，此时，全文/展开按钮会展示错误。

3.png

4.png

通过分析代码可知，在展开全文的状态下更新了文本，此时.showarea节点和.hidearea节点的高度一致，执行代码let showfold = res[0].height

因此解决方案为：

// 如果文本超出最大行数，并且是显示全文的状态下，再次更新了文字
let onfold = false
if (showareaheight == hideareaheight &amp;&amp; showareaheight &gt; maxheight) {
  showfold = true
  onfold = true
}
登录后复制

所以最终版本的checkfold方法是：

checkfold() {
  const query = this.createselectorquery();
  query.selectall(".showarea, .hidearea").boundingclientrect(res =&gt; {
    let showfold = res[0].height  maxheight
    }
    // 如果文本超出最大行数，并且是显示全文的状态下，再次更新了文字
    let onfold = false
    if (showareaheight == hideareaheight &amp;&amp; showareaheight &gt; maxheight) {
      showfold = true
      onfold = true
    }
    this.setdata({
      width: res[0].width,
      showfold,
      onfold,
    })
  }).exec()
},
登录后复制

四、代码片段

经过多次测试，修改，最后附上代码片段：https://developers.weixin.qq.com/s/gwj19vmc7oxp各位大神如果有更好的建议，可留言哦~~~

【相关学习推荐：小程序开发教程】

以上就是聊聊小程序怎么实现“全文收起”功能的详细内容，更多请关注代码网其它相关文章！

赞 (0)

相关文章:

  • 归纳整理微信小程序权限接口

    本篇文章给大家带来了关于微信小程序的相关问题，其中主要介绍了微信小程序中的权限接口的相关内容，包括了用户授权接口、获取用户权限设置接口、打开用户权限设置接口等内容，下面一起来看一下…

    2025年03月30日 • 腾讯
  • 手把手教你在微信小程序中使用canvas绘制天气折线图（附代码）

    手把手教你在微信小程序中使用canvas绘制天气折线图（附代码）

    微信小程序中如何绘制天气折线图？下面本篇文章就来给大家介绍一下在微信小程序中使用canvas绘制天气折线图的方法，以及使用三阶贝塞尔曲线拟合温度点，使之变得圆滑... [阅读全文]

  • 微信小程序WXML模板语法总结

    本篇文章给大家带来了关于微信小程序的相关知识，其中主要介绍了关于wxml模板语法的相关内容，包括了数据绑定、事件绑定、条件渲染、列表渲染等等问题，下面一起来看一下，希望对大家有帮助…

    2025年03月30日 • 腾讯
  • 小程序中rpx和px有什么区别

    小程序中rpx和px有什么区别

    区别：1、rpx是相对长度单位，而px是固定长度单位；2、rpx可以自适应手机分辨率，适配当前机型，而px不能很好的适应不同分辨率的手机。本教程操作环境：har... [阅读全文]

  • 微信小程序视图层详解

    本篇文章给大家带来了关于微信小程序的相关知识，其中主要介绍了关于视图层的相关问题，视图层负责将逻辑层的数据显示在页面上，同时将视图层的事件发送给逻辑层，下面一起来看一下，希望对大家…

    2025年03月30日 • 腾讯
  • 微信小程序有哪几个特点

    微信小程序有哪几个特点

    微信小程序的特点有：1、无需安装和卸载，用户可以直接使用，使用完直接关闭，不会占用桌面空间；2、制作成本低；3、内存小、运行快，操作便利快捷；4、容易部署，具有... [阅读全文]

版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。

发表评论

验证码：
最近更新的文章
推荐阅读
大家感兴趣的文章
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱：2386932994@qq.com