15赞
345
当前位置:  开发笔记 > 前端 > 正文

微信小程序实现折叠与展开文章功能

这篇文章主要介绍了关于微信小程序实现折叠与展开文章功能,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

这篇文章主要介绍了关于微信小程序实现折叠与展开文章功能,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

最近做项目遇到这样的需求,页面折叠超出的的部分显示省略号,点击展开后显示全部内容。具体实现代码

需求

页面折叠超出的的部分显示省略号,点击展开后显示全部内容

  • 箭头方向的变化是一个点击事件bindtap,点击后更换小图标;

  • 文本变化是一个show或者hide的事情,折叠的时候有个多行文本溢出得问题五个属性(display: -webkit-box,-webkit-box-orient: vertical, -webkit-line-clamp,text-overflow,overflow)

  • 状态与数据绑定控制样式

具体实现

wxml

  
    
      
        公司介绍
      
      
        
          创业是个失败概率很大的事情,我们很高兴从2012底到现在还活着, 而且还活的很不错。 目前有赞旗下的产品有:有赞微商城、有赞收银、有赞零售、有赞美业、有赞批发、有赞买家版、有赞微小店.
        
        
          我们认为,相比较业务来说,团队才是公司的核心。有赞没有“员工”只有“小伙伴”,也没有人姓“公”名“司”,我们有一群聪明、有要性、又皮实的伙伴,这才是我们最大的资产。
        
        
          有赞的小伙伴目前已超过1000人,工程师比例占55%,我们有很浓的工程师氛围,每周都有很多的有意思的分享:有出国旅游的分享、有如何搭讪的分享、有如何装修房子的分享...技术分享更是数不胜数。 我们的工作不是很轻松,但我们的氛围很轻松,很open,公司里随处可见骑着独轮车来回跑的工程师、懒人沙发、午睡吊篮、复古电话亭等等,每个月都有节日、新人表演、拓展、派对等,对我们来说,天天都可以是节日。我们倡导简单直接的沟通方式,希望做一家通透的公司。这里并没有过多的等级划分,你可以随时提出自己的意见和任何人PK。福利方面我们全额缴纳五险一金,每月980元的有赞E卡鼓励大家一起吃喝玩乐。工程师标配MacBookPro、大屏显示器和机械键盘。办公室里常备零食、水果,休息区有电视、游戏机、桌球、乒乓球、四驱赛车、桌游随时供大家放松减压。每天晚下班的打车费报销,每年给你和你的家人提供旅游和体检等等。
        
      
      
    
  

wxss

.long-dec{
  padding-left: 20rpx;
  margin-top: -87rpx;
  display: -webkit-box;/*关键属性*/
  font-size:28rpx;
  color:#cfcfd0;
  line-height: 40rpx;
  word-break: break-all;
  -webkit-box-orient: vertical;/* 关键属性 */
  -webkit-line-clamp:6;/* 关键属性 */
  overflow: hidden;/* 关键属性 */
  text-overflow:ellipsis;/* 超出内容显示省略号*/
}
.hide{
 display: -webkit-box;
}
.show{
 display: block;
}
.arrow{
 position: absolute;
 width: 40rpx;
 height: 43rpx;
 left: 50%;
 transform: translate(-50%);
}

js

Page({
 data: {
  isFold: true,
 },
showAll: function (e) {
  this.setData({
   isFold: !this.data.isFold,
  })
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注!

推荐阅读
  • 为了方便小程序应用使用微信登录态进行授权登录,微信小程序提供了登录授权的开放接口。乍一看文档,感觉文档上讲的非常有道理,但是实现起来又真的是摸不着头脑,不知道如何管理和维护登录态。本文就来手把手的教会大家在业务里如何接入和维护微信登录态。 ... [详细]
  • 小程序中如何管理session?下面本篇文章给大家介绍一下微信小程序开发session管理教程。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 ... [详细]
  • 微信小程序中为什么不使用骨架屏 ... [详细]
  • 解决微信小程序图片无法显示的办法:首先给标签元素设置背景图片;然后通过image标签查验一下图片的路径;接着当本地资源无法通过WXSS获取时,就使用【background-image】方法;最后删除wxss中的背景并通过测试即可。 ... [详细]
  • 微信小程序:一个json帮你完成分享朋友圈图片 ... [详细]
  • 微信小程序开发BUG经验总结 ... [详细]
  • 步骤:1、登录微信公众平台关联小程序;2、点击微信公众平台中的“新建群发”;3、点击添加小程序,在弹窗中点击“获取更多页面路径”;4、把小程序路径的微信号放在小弹窗里,点击开启;5、进入小程序,点击“”,再点击“复制本页面路径”即可。 ... [详细]
  • Proxy对象到底是什么?Proxy对象到底是什么呢?Proxy的意思是代理,proxy对象的作用是:通过Proxy创建1个代理对象,然后通过操作代理对象。 ... [详细]
  • 方法:首先在微信中打开小程序,点击“个人中心”;接着点击“待发货”;然后点击“申请退款”按钮,选择“退款理由”,选择“提交申请”;最后等待卖家回复,等待退款即可。 ... [详细]
  • 在微信小程序开发中,由wx.request()发起的每次请求对于服务端来说都是不同的一次会话,微信小程序不会把session信息带回服务端,即对应服务端不同的session,由于项目中使用session保存用户信息所以导致后续请求相当于未登录的情况。 ... [详细]
devbox
花颖年华
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4