微信小程序开发实现折叠收缩界面功能

这次给大家带来微信小程序开发实现折叠收缩界面功能，微信小程序开发实现折叠收缩界面功能的注意事项有哪些，下面就是实战案例，一起来看一下。

需求

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

需要解决的问题

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

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

如何解决？

箭头方向的变化是一个点击事件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%);}jsPage({ data: {isFold: true, },showAll: function (e) {this.setData({isFold: !this.data.isFold,}) }相信看了本文案例你已经掌握了方法，更多精彩请关注小潘博客其它相关文章！

推荐阅读：

js遍历操作css

vue-cli安装与配置webpack以上就是微信小程序开发实现折叠收缩界面功能的详细内容，更多请关注小潘博客其它相关文章！