微信小程序怎么制作折叠收缩界面功能

  介绍

小编给大家分享一下微信小程序怎么制作折叠收缩界面功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

<强>需求

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

微信小程序怎么制作折叠收缩界面功能

<强>需要解决的问题

<李>

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

<李>

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

<>强如何解决?

<李>

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

<李>

文本变化是一个节目或者隐藏的事情,折叠的时候有个多行文本溢出得问题五个属性(显示:-webkit-box -webkit-box-orient:垂直、-webkit-line-clamp文本溢出,溢出)

<李>

状态与数据绑定控制样式

<强>具体实现

wxml

,,& lt; view 类=癱ompany-detail"比;   ,,,& lt; view 类=癱ompany-detail-content"比;   ,,,,,& lt; view 类=皐eui-loadmore  weui-loadmore_line"比;   ,,,,,,,& lt; view 类=皐eui-loadmore__tips  weui-loadmore__tips_in-line"在公司介绍& lt;/view>   ,,,,,& lt;/view>   ,,,,,& lt; view 类=發ong-dec  {{isFold ? & # 39;隐藏# 39;:& # 39;显示# 39;}}“比;   ,,,,,,,& lt; text 类=癴irst-dec"比;   ,,,,,,,,,创业是个失败概率很大的事情,我们很高兴2012年从底到现在还活着,,而且还活的很不错只目前有赞旗下的产品有:有赞微商城,有赞收银,有赞零售,有赞美业,有赞批发,有赞买家版,有赞微小店。   ,,,,,,,& lt;/text>   ,,,,,,,& lt; text 类=皊econd-dec"比;   ,,,,,,,,,我们认为,相比较业务来说,团队才是公司的核心。有赞没有“员工”只有“小伙伴”,也没有人姓“公”名“司”,我们有一群聪明,有要性,又皮实的伙伴,这才是我们最大的资产。   ,,,,,,,& lt;/text>   ,,,,,,,& lt; text 类=發ast-dec"比;   ,,,,,,,,,有赞的小伙伴目前已超过1000人,工程师比例占55%,我们有很浓的工程师氛围,每周都有很多的有意思的分享:有出国旅游的分享,有如何搭讪的分享,有如何装修房子的分享…技术分享更是数不胜数只我们的工作不是很轻松,但我们的氛围很轻松,很开放,公司里随处可见骑着独轮车来回跑的工程师,懒人沙发,午睡吊篮,复古电话亭等等,每个月都有节日,新人表演,拓展,派对等,对我们来说,天天都可以是节日。我们倡导简单直接的沟通方式,希望做一家通透的公司。这里并没有过多的等级划分,你可以随时提出自己的意见和任何人PK。福利方面我们全额缴纳五险一金,每月980元的有赞E卡鼓励大家一起吃喝玩乐。工程师标配MacBookPro,大屏显示器和机械键盘。办公室里常备零食,水果,休息区有电视,游戏机,桌球,乒乓球,四驱赛车,桌游随时供大家放松减压。每天晚下班的打车费报销,每年给你和你的家人提供旅游和体检等等。   ,,,,,,,& lt;/text>   ,,,,,& lt;/view>   ,,,,,& lt; image 类=癮rrow", src=https://www.yisu.com/zixun/眥{isFold ?“. ./. ./youzan-image/down.png”:“. ./. ./youzan-image/ng}}”bindtap=" showAll ">      

wxs

.long-dec {   ,,padding-left: 20 rpx;   ,,margin-top: -87 rpx;   ,,显示:-webkit-box;/*关键属性*/字体大小才能:28 rpx;   颜色:# cfcfd0;才能   ,,行高:40 rpx;   单词分割:,才能打破所有;   ,,-webkit-box-orient:垂直的;/*,关键属性,*/-webkit-line-clamp才能:6;/*,关键属性,*/,,溢出:隐藏。/*,关键属性,*/文本溢出才能:省略;/*,超出内容显示省略号*/}   hide {   ,显示:-webkit-box;   }   ,告诉{   ,显示:块;   }   .arrow {   ,位置:绝对;   ,宽度:40 rpx;   ,高度:43 rpx;   ,左:50%;   ,变换:翻译(-50%);   }

js

页面({   ,数据:{   isFold才能:,真的,   },   showAll: function  (e), {   this.setData({才能   ,,,isFold: ! this.data.isFold,   })才能   ,}

以上是“微信小程序怎么制作折叠收缩界面功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

微信小程序怎么制作折叠收缩界面功能