微信小程序怎么制作折叠收缩界面功能
小编给大家分享一下微信小程序怎么制作折叠收缩界面功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联公司网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队,负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作,以确保网站外观精美、网站设计制作、做网站易于使用并且具有良好的响应性。
需求
页面折叠超出的的部分显示省略号,点击展开后显示全部内容
需要解决的问题
箭头随展开折叠后箭头方向的变化
当点击箭头文本显示内容的变化
如何解决?
箭头方向的变化是一个点击事件bindtap,点击后更换小图标;
文本变化是一个show或者hide的事情,折叠的时候有个多行文本溢出得问题五个属性(display: -webkit-box,-webkit-box-orient: vertical, -webkit-line-clamp,text-overflow,overflow)
状态与数据绑定控制样式
具体实现
wxml
公司介绍 创业是个失败概率很大的事情,我们很高兴从2012底到现在还活着, 而且还活的很不错。 目前有赞旗下的产品有:有赞微商城、有赞收银、有赞零售、有赞美业、有赞批发、有赞买家版、有赞微小店. 我们认为,相比较业务来说,团队才是公司的核心。有赞没有“员工”只有“小伙伴”,也没有人姓“公”名“司”,我们有一群聪明、有要性、又皮实的伙伴,这才是我们最大的资产。 有赞的小伙伴目前已超过1000人,工程师比例占55%,我们有很浓的工程师氛围,每周都有很多的有意思的分享:有出国旅游的分享、有如何搭讪的分享、有如何装修房子的分享...技术分享更是数不胜数。 我们的工作不是很轻松,但我们的氛围很轻松,很open,公司里随处可见骑着独轮车来回跑的工程师、懒人沙发、午睡吊篮、复古电话亭等等,每个月都有节日、新人表演、拓展、派对等,对我们来说,天天都可以是节日。我们倡导简单直接的沟通方式,希望做一家通透的公司。这里并没有过多的等级划分,你可以随时提出自己的意见和任何人PK。福利方面我们全额缴纳五险一金,每月980元的有赞E卡鼓励大家一起吃喝玩乐。工程师标配MacBookPro、大屏显示器和机械键盘。办公室里常备零食、水果,休息区有电视、游戏机、桌球、乒乓球、四驱赛车、桌游随时供大家放松减压。每天晚下班的打车费报销,每年给你和你的家人提供旅游和体检等等。
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, }) }
以上是“微信小程序怎么制作折叠收缩界面功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网站标题:微信小程序怎么制作折叠收缩界面功能
本文地址:http://scyanting.com/article/poicsd.html