由于设计项目的页面,一个列表里面文字太过于长,也影响页面美观,所以不少软件都有展开收起这个小功能。
1.文本超出设置行数后隐藏,然后显示省略号...
2.可点击展开看隐藏的文本内容,也可以收起。
如图:
wxml
<scroll-view class='page'> <!-- 列表 --> <view class='list' wx:for='{{DataSource}}' wx:key="index"> <!-- 内容 start--> <view class="user-content-view {{item.isF?'hide':'show'}}"> <text class="user-content">{{item.content}}</text> </view> <!-- 内容 end--> <!-- 展开 收起 strat--> <view bindtap="change" class="state" data-index="{{index}}">{{item.isF?'展开':'收起'}}</view> <!-- 展开 收起 end --> </view> </scroll-view>
wxss
.page{
margin-top: 50rpx;
}
/* 列表 */
.list{
background: white;
margin-bottom: 1px;
border-bottom: 1px solid whitesmoke;
/* border-top: 1px solid whitesmoke; */
}
.user-content-view{
text-align: center;
display: -webkit-box; /*关键属性(必须有的) */
-webkit-box-orient: vertical; /*规定子元素的排列方向 */
-webkit-line-clamp:3; /*行数*/
/* 实现多余的文字隐藏并用省略号来代表被隐藏的文字 */
overflow: hidden;
text-overflow:ellipsis;
}
.user-content{
/* display: flex; */
font-size: 18px;
/* line-height: 50rpx;
margin-left: 10rpx;
*/
}
/* 展开 收起 */
.state{
width: 96%;
text-align: right;
color: rgb(88, 103, 138);
margin: 10rpx 0rpx;
font-size: 35rpx;
font-weight: bold;
}
.hide{
display: -webkit-box;
}
.show{
display: block
}
js
我把展开收起的状态放到数组里面,按道路可以不用放在数组里面的,这样不灵活使用。
// pages/CircleFriends/CircleFriends.js var app = getApp() var that Page({ /** * 页面的初始数据 */ data: { DataSource: [ { isF: true, content: '掌握HTML是网页的核心,是一种制作万维网页面的标准语言,是万维网浏览器使用的一种语言,它消除了不同计算机之间信息交流的障碍。因此,它是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言,学好HTML是成为Web开发人员的基本条件。HTML是一种标记语言,能够实现Web页面并在浏览器中显示。HTML5作为HTML的最新版本,引入了多项新技术,大大增强了对于应用的支持能力,使得Web技术不再局限于呈现网页内容。', }, { isF: true, content: '前端开发是创建Web页面或app等前端界面呈现给用户的过程。前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 [1] 。它从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。', } ], }, //展开 收起 change: function (e) { var that = this; var DataSource = that.data.DataSource; var row = DataSource[e.currentTarget.dataset.index]; console.log("**********:" + row) row.isF = !row.isF; that.setData({ DataSource: DataSource, }) }, })