微信小程序中折叠文本与参数传递

要实现的效果:这里写图片描述

因为一个页面中有两个地方使用了文本折叠,所以需要穿参数(tag),以区分你点击的是哪一个。

参考文章里讲解的很详细,需要的可以看看:
微信小程序过长文本折叠效果的探索
微信小程序-参数传递与事件处理

.content text{
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient:vertical; 
}
//我是通过动态添加或删除类名的方法实现折叠展开效果的
//折叠样式
.ellipsis{
    -webkit-line-clamp:6;//设置要显示的行数
    overflow: hidden;//溢出隐藏
}

//绑定点击事件
  expand(who) {
    // 在wxml中绑定事件后,通过data-hi="参数"的方式传递
    var tag = who.currentTarget.dataset.hi;

  //  内容简介
    if (tag === 'is_ellipsis'){
       var value = !this.data.is_ellipsis;
       this.setData({ is_ellipsis: value})
    } 
    // 作者简介
    else if (tag === 'author_e'){
      var value = !this.data.author_e;
      this.setData({ author_e: value })
    }  
  }

有一点需要注意:给是否折叠的标志重新赋值时,必须经过第三方变量接收一下,不能直接写成this.setData({ author_e: !author_e }),这样写会提示author_e is undefined

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值