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

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

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

需求

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

需要解决的问题

箭头随展开折叠后箭头方向的变化

当点击箭头文本显示内容的变化

如何解决？

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

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

状态与数据绑定控制样式

具体实现

wxml

 view >
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,
 }
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
微信小程序服务端获取用户解密信息的方法

微信小程序中图片宽度自适应的实现

关于微信小程序底部导航栏目的开发


以上就是微信小程序实现折叠与展开文章功能的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！