1.实现一个手风琴效果,点击展开,点击合起;
wxml:
<view class='box'>
<block wx:for="{{textList}}">
<view class='text-item'>
<view class='text-name'>{{item.title}}</view>
<view class='text-desc' style="{{item.upStatus?'':'display:-webkit-box'}}">{{item.description}}</view>
<view class='text-bottom'>
<view class='text-btn' data-index="{{index}}" bindtap='upDown'>
<image hidden='{{item.upStatus}}' src='/images/slide.png'></image>
<image hidden='{{!item.upStatus}}' src='/images/up.png'></image>
<text>{{!item.upStatus?'展开':'收起'}}</text>
</view>
</view>
</view>
</block>
</view>
wxss:
.box {
display: flex;
flex-direction: column;
width: 690rpx;
margin: auto;
}
.text-item {
padding: 40rpx 0;
border-bottom: solid 1px #efefef;
}
.text-name {
margin-top: 10rpx;
font-family: PingFangSC-Medium;
font-size: 34rpx;
color: #333;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.text-desc {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #666;
margin-top: 10rpx;
/* display: -webkit-box; */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.text-bottom {
display: flex;
justify-content: flex-end;
}
.text-btn {
margin-top: 20rpx;
width: 103rpx;
height: 39rpx;
border: solid 1px #d2d2d2;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.text-btn image {
width: 19rpx;
height: 12rpx;
margin-right: 10rpx;
}
.text-btn text {
font-family: PingFangSC-Regular;
font-size: 22rpx;
color: #999;
}
js:
data: {
textList: [{
'description': "微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,",
'title': "微信小程序 - 折叠展开效果",
},
],
},
//原本没有upStatus这个字段,所以默认值为false
upDown(event) {
var index = event.currentTarget.dataset['index'];
this.data.textList[index].upStatus = !this.data.textList[index].upStatus;
this.setData({
textList: this.data.textList
})
},
看下效果: