微信小程序开发实现界面折叠收缩功能(如何缩小微信小程序的界面)

这次通过微信小程序开发，给大家带来折叠收缩界面的功能。通过微信小程序开发折叠收缩界面的功能有哪些注意事项？以下是实际案例。让我们来看看。

要求

如果页面是折叠的，会显示省略号，点击展开后会显示所有内容。

有待解决的问题

箭头展开和折叠后箭头方向的改变

单击箭头文本时，内容会发生变化。

怎么解决？

箭头方向的改变是一个点击事件bindtap，点击后小图标被替换；

文本的变化是一个显示或隐藏的事情。折叠时有多行文本溢出问题，有五个属性(显示:-webkit-box，-WebKit -box -orientation:vertical，-webkit-line-clamp，text-overflow，overflow)

具有状态数据绑定的控件样式

具体实现

wxml

& ltview class = & quot公司-详细信息& quot& gt& ltview class = & quot公司-详细信息-内容& quot& gt& ltview class = & quotweui -load more weui -load more _ line & quot；& gt& ltview class = & quotweui -load more _ _ tips weui -load more _ _ tips _ in-line & quot；& gt公司介绍

. long -dec { padding -left:20 rpx；margin -top:-87 rpx；显示器:-WebKit -box；/*关键属性*/font -size:28 rpx；颜色:# cfcfd0line -高度:40rpxword -break:break -all；-webkit-box-orient:垂直；/*关键属性*/-WebKit -line -clamp:6；/* key属性*/overflow:hidden；/*键属性*/text -溢出:省略号；/*超出内容显示的省略号*/}。隐藏{ display:-WebKit -box；}.显示{ display:block；}.箭头{位置:绝对；宽度:40rpx高度:43rpx左:50%；transform:平移(-50%)；}js

Page({ data: { isFold: true，}，showAll:function(e){ this . setdata({ is fold:！This.data.isFold，})}相信你看完这个案例已经掌握了方法。更多精彩请关注即时码站其他相关文章！

推荐阅读:

Js遍历操作css

webpack的Vue-cli安装和配置