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

需求

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

需要解决的问题

• 箭头随展开折叠后箭头方向的变化
• 当点击箭头文本显示内容的变化

如何解决？

• 箭头方向的变化是一个点击事件bindtap,点击后更换小图标；
• 文本变化是一个show或者hide的事情，折叠的时候有个多行文本溢出得问题五个属性（display: -webkit-Box，-webkit-Box-orient: vertical， -webkit-line-clamp，text-overflow，overflow）
• 状态与数据绑定控制样式

具体实现

wxml

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

wxss

rush:js;"> .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

rush:js;"> Page({ data: { isFold: true,},showAll: function (e) { this.setData({ isFold: !this.data.isFold,}) }

总结

以上所述是小编给大家介绍的微信小程序折叠与展开文章的实现代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

原文地址：https://www.jb51.cc/weapp/31929.html