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

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

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

需求

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

需要解决的问题

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

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

如何解决？

箭头方向的变化是一个点击事件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中文网！

相关推荐：

微信小程序服务端获取用户解密信息的方法

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

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

以上就是微信小程序实现折叠与展开文章功能的详细内容，更多请关注小潘博客其它相关文章！