最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】小程序中实现点击按钮展开或收起的一段文字

程序 crifan 526浏览 0评论
折腾:
【记录】小程序优化绘本查询细节的功能和逻辑
期间,需要实现web页面中的:
点击后展开显示全部:
再点击就收回:
此处希望:
不用之前web页面的太复杂的做法:
看看是否有更好的实现
小程序 expandable text
微信小程序 view的文本不能自动换行问题-新手教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
小程序 文字 点击 展开 收起
微信小程序:text文本的展开与收起 – 简书
微信小程序中文本过长-实现折叠与展开效果 – Syleapn的博客 – CSDN博客
是我希望的
小程序—点击展开 隐藏 – qq_23040853的博客 – CSDN博客
微信小程序过长文本折叠效果的探索 – 掘金
小程序折叠与展开文章的的实现 – 个人文章 – SegmentFault 思否
小程序实现展开/收起的效果示例_javascript技巧_脚本之家
微信小程序——文本的展开与收起 – 前端[色色] – 博客园
微信小程序实现text文本的展开与收起 _Hi小程序
开发 | 小程序也能像朋友圈一样「折叠全文」?有了这个技巧就能做! | 爱范儿
Can I use… Support tables for HTML5, CSS3, etc
【总结】
最后用:
pages/detail/detail.wxml
      <view class='detail_item_intro'>
        <label class='detail_item_key detail_intro_key'>简介: </label>
        <view
          class='detail_intro_value {{isExpanded ? "show_all": "show_less" }}'>
          {{curBookInfo.descriptionStr}}
        </view>
        <button
          class='detail_expand_fold'
          bindtap='toogleDetailExpand'
        >
          {{isExpanded ? "收起" : "更多" }}
        </button>
      </view>
pages/detail/detail.wxss
  font-size: 12px;
  font-family: "PingFangSC-Regular", "Microsoft Yahei", "微软雅黑", "Heiti SC";
  color: rgb(51, 51, 51);
  margin-bottom: 2px;

  display: -webkit-box; /* 关键属性(必须有的)  */
  -webkit-box-orient: vertical; /* 规定子元素的排列方向 */
  overflow: hidden; /* 实现多余的文字隐藏 */
  text-overflow: ellipsis; /* 并用省略号来代表被隐藏的文字 */
}

.show_less {
  -webkit-line-clamp: 4; /* 限制文本显示的行数 */
}

.show_all {
  -webkit-line-clamp: 0; /* 全部显示 */
}

.detail_expand_fold{
  float: right;
  color: rgba(97, 210, 179, 0.8);
  font-size: 12px;
  margin-top: 5px;

  background-color: transparent;
  border-color: transparent;
}
pages/detail/detail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isExpanded: false
  },

  toogleDetailExpand: function(e) {
    this.setData({
      isExpanded: !this.data.isExpanded
    })
  },

}
实现了要的效果:
默认显示4行:
点击后,显示全部:
再点击后,缩回:

转载请注明:在路上 » 【已解决】小程序中实现点击按钮展开或收起的一段文字

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
84 queries in 0.111 seconds, using 20.65MB memory