专栏首页韦弦的偶尔分享微信小程序展开全文

微信小程序展开全文

最近需要做一个展示部分文字然后展开全文的功能,要求如下:
  • 1、最多显示三行,文末使用省略号表示
  • 2、文字显示1行,2行及文字不满三行时不要显示展开全文按钮
解决方案:
最开始设置显示4行,查询节点获取文字高度,如果是小于4行的高度,不显示展开,如果不是,设置显示3行,然后显示展开全文按钮。
  • 1、为啥开始显示4行? 我没找到判断文字刚好3行的方法。。。所以只能开始显示4行,这样如果需要显示展开全文,页面基本不会抖动。。。
  • 2、查询节点高度的方法WXML节点信息API
      var query = wx.createSelectorQuery()
      query.select(".class").boundingClientRect(data => {
         
      }).exec()

这个方法要在,页面渲染完成后调用

  • 3、如何判断高度小于4行 试了好多次,发不同屏幕渲染出来的3行和4行高度是不一样的,把所有模拟器试了一遍,判断小于4行自己找个临界值还是可以做到的。把读取到的高度换算成rpx,自己找一个3行和4行高度的中间值。。。
var query = wx.createSelectorQuery()
      query.select(".des-short").boundingClientRect(data => {

        //获取屏幕宽度
        wx.getSystemInfo({
          success: res => {
            //console.log(res)

            //获取文字高度rpx
            let height = data.height * 750 / res.screenWidth

            //文字高度
            console.log(height)
          },
        })  
      }).exec()
  • 4、如何限制显示固定行数,直接上代码
 <view class='des1'>
    <text>{{text3}}</text>
 </view>

.des1 {
  margin-left: 50rpx;
  margin-top: 30rpx;
  width: 650rpx;
  font-size: 26rpx;
  color: #484848;

  display: -webkit-box;            /* 定义为自适应布局 */
  word-break: break-all;           /* 换行模式 */
  text-overflow: ellipsis;         /* 超出文字用省略号代替 */
  overflow: hidden;                /* 多出部分隐藏 */
  -webkit-box-orient: vertical;    /* 竖直方向的超出和隐藏 */
  -webkit-line-clamp: 3;           /* 设定行数为3 */ 
}
最终代码:
  • wmxl
<view class='container'>

  <!-- 例:少于三行 -->
  <view class='{{showTotal1 ? "des" : "des-short1 des-short"}}' style='-webkit-line-clamp: {{lineNum1}};'>
    <text>{{text1}}</text>
  </view>
  <view wx:if="{{showTotalBtn1}}" class='btn'>显示全部</view>

  <!-- 例:等于三行,但不超过三行 -->
  <view class='{{showTotal2 ? "des" : "des-short2 des-short"}}' style='-webkit-line-clamp: {{lineNum2}};'>
    <text>{{text2}}</text>
  </view>
  <view wx:if="{{showTotalBtn2}}" class='btn'>显示全部</view>

  <!-- 例:超过三行 -->
  <view class='{{showTotal3 ? "des" : "des-short3 des-short"}}' style='-webkit-line-clamp: {{lineNum3}};'>
    <text>{{text3}}</text>
  </view>
  <view wx:if="{{showTotalBtn3}}" class='btn' bindtap='showAll'>显示全部</view>
</view>
  • wxss
.des {
  margin-left: 50rpx;
  margin-top: 30rpx;
  width: 650rpx;
  font-size: 26rpx;
  color: #484848;
}

.des-short {
  margin-left: 50rpx;
  margin-top: 30rpx;
  width: 650rpx;
  font-size: 26rpx;
  color: #484848;

  display: -webkit-box;            /* 定义为自适应布局 */
  word-break: break-all;           /* 换行模式 */
  text-overflow: ellipsis;         /* 超出文字用省略号代替 */
  overflow: hidden;                /* 多出部分隐藏 */
  -webkit-box-orient: vertical;    /* 竖直方向的超出和隐藏 */
  -webkit-line-clamp: 4;           /* 设定行数为4 */ 
}

.btn {
  margin-top: 10rpx;
  margin-left: 50rpx;
  color: lightseagreen;
  font-size: 26rpx;
}
  • js
Page({
  data: {
    showTotal1: false,
    showTotal2: false,
    showTotal3: false,
  },
  onLoad: function() {

    wx.getSystemInfo({
      success: res => {
        console.log(res)
        //获取屏幕宽度
        this.data.screenWidth = res.screenWidth
      },
    })

    this.setData({
      text1: '我不是懒,我是享受不作为',
      text2: '微信小程序展开全文,解决方案,实现这个功能并不难,难的是开始没思路,。。。。。。怎么就凑不齐刚刚好两行半呢。。。',
      text3: `雅各布一个35岁的欧洲生产经理,每天为了解决各种问题从工厂的这一头跑到另一头,仅仅是为了保证生产能正常进行。雅各布清楚的知道如果想成为一名优秀的领导者,他必须为自己留有空余时间思考。为部门的战略布局所出谋划策,扩大业务。但每天的繁杂琐事让他无从顾忌。

那么雅各布应该如何增强企业内部各部门之间的合作呢?

如何预测这瞬息万变的市场呢?

那他的解决方法是什么呢?

也许像雅各布一样,你也正处于一个混乱期,有太多的事情要处理,而没有足够的时间去反思业务的变化情况以及去思考如何成为一名优秀的领导者。很多需要紧急处理的事情限制着你,让你没有办法去做那些更重要的事。但是在努力学会做好一个领导者的问题上,你面临着一个更大的挑战:那就是只有先行动起来,你才能知道关于自己,关于工作你需要做些什么,而不仅仅是思考。

作者:沐轻舟
链接:https://www.jianshu.com/p/6d51bade33b9
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。`,
    }, () => {
      let query1 = wx.createSelectorQuery()
      query1.select(".des-short1").boundingClientRect(data => {
        //获取屏幕宽度
        let height = data.height * 750 / this.data.screenWidth
        console.log(height)
        
        this.setData({
          lineNum1: 3,
          showTotalBtn1: height > 130 ? true : false 
        })
        
      }).exec()

      let query2 = wx.createSelectorQuery()
      query2.select(".des-short2").boundingClientRect(data => {
        //获取屏幕宽度
        let height = data.height * 750 / this.data.screenWidth
        console.log(height)

        this.setData({
          lineNum2: 3,
          showTotalBtn2: height > 130 ? true : false
        })
      }).exec()

      let query3 = wx.createSelectorQuery()
      query3.select(".des-short3").boundingClientRect(data => {
        //获取屏幕宽度
        let height = data.height * 750 / this.data.screenWidth
        console.log(height)

        this.setData({
          lineNum3: 3,
          showTotalBtn3: height > 130 ? true : false
        })
      }).exec()
    })
  },

  showAll: function() {
    this.setData({
      showTotal3: true,
      showTotalBtn3: false
    })
  },
})

设置130为临界值,是试了3行基本不超过120rpx,4行基本大于140rpx,取了个中间值

页面效果

未展开.png

已显示全部.png

没有做收起功能了,不过加上去很容易了。希望大家喜欢~~~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SwiftUI:自定义修饰符

    SwiftUI为我们提供了一系列内置修饰符,例如font(),background()和clipShape()。但是,也可以创建自定义修饰符来执行特定的操作。

    韦弦zhy
  • Hacking with iOS: SwiftUI Edition - 书虫项目(一)

    在这个项目中,我们将构建一个应用程序来跟踪您阅读过哪些书以及您对它们的看法,并且它将遵循与项目10类似的主题:让我们利用您已经掌握的所有技能,然后添加一些额外的...

    韦弦zhy
  • SwiftUI:环境修饰符

    例如,如果我们在一个VStack中有四个文本视图,并且希望为它们提供相同的字体修饰符,我们可以直接将修饰符应用于VStack,并将该更改应用于所有四个文本视图:

    韦弦zhy
  • 微生物领域名言(5)物种的稀有性

    ‘rarity is the attribute of a vast number of species of all classes, in all coun...

    生物信息知识分享
  • python: dir函数

    JNingWei
  • Unity基础教程-物体运动(十一)——滚动(Animated Sphere)

    这是有关控制角色移动的教程系列的第11部分,也是最后一部分。它把我们毫无特色的球变成了滚动的球。

    放牛的星星
  • 集体数据欺诈的统计检测(Databases)

    统计发散在多媒体处理中被广泛应用,其主要原因是其数据显示较有规律性和有可解释的特征。然而,在更广泛的数据领域中,这些优势可能并不突出,因此需要一种更通用的方法。...

    李欣颖6837176
  • 神奇的 SQL 之 CASE表达式,妙用多多 !

      历史考试选择题:黄花岗起义第一枪谁开的? A宋教仁 B孙中山 C黄兴 D徐锡麟,考生选C。

  • SQL Case when 的使用方法

    这两种方式,可以实现相同的功能。简单Case函数的写法相对比较简洁,但是和Case搜索函数相比,功能方面会有些限制,比如写判断式。 还有一个需要注意的问题,...

    大道七哥
  • Python 网络编程基础

    通常网络编程也被称为套接字(socket)编程,它最早可以追溯到 20 世纪 70 年代,在美国加利福尼亚大学的伯克利版本 UNIX系统(即BSD UNIX)上...

    arcticfox

扫码关注云+社区

领取腾讯云代金券