微信小程序实现展示/收起切换图标 上下效果(超详细)

我们先来看看

wxml

<view class="appraise-content"><text class="evaluate-content {{ellipsis? 'ellipsis': 'unellipsis'}}">日期；约会；年代；枣椰子；过时；注明日期；始于（某一历史时期）；确定…年代；和…约会；(Date)人名；(日)伊达 (姓)；(英)戴特；日期；约会；年代；枣椰子；过时；注明日期；始于（某一历史时期）；确定…年代；和…约会；(Date)人名；(日)伊达 (姓)；(英)戴特；日期；约会；年代；枣椰子；过时；注明日期；始于（某一历史时期）；确定…年代；和…约会；(Date)人名；(日)伊达 (姓)；(英)戴特；日期；约会；年代；枣椰子；过时；注明日期；始于（某一历史时期）；确定…年代；和…约会；(Date)人名；(日)伊达 (姓)；(英)戴特；</text><image class="difference-img content-jian" bindtap="ellipsis" src="{{ellipsis?'../../../img/icon/icon-descend.png': '../../../img/icon/icon-up.png'}}"></image></view>

wxss

.appraise-content {font-size: 30rpx;/* font-weight: 500; */}.evaluate-content {display: -webkit-box;-webkit-box-orient: vertical;text-overflow: ellipsis;overflow: hidden;}.ellipsis {-webkit-line-clamp: 5;opacity: 0.75;}.unellipsis {-webkit-line-clamp: 0;opacity: 1;}.content-jian {float: right;}.appraise-img {margin: 40rpx 0 0;}

js

Page({/*** 页面的初始数据*/data: {ellipsis: true,},ellipsis: function() {let value = !this.data.ellipsis;this.setData({ellipsis: value})},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {}})

最后给大家看一下效果图吧