小程序展开收起

效果图:

js:

// 获取全局应用程序实例对象
var app = getApp();

// 创建页面实例对象
Page({
  /**
   * 页面的初始数据
   */
  data: {
    isShow: false, //控制收起展开
    },//控制收起展开
     toChange: function () {
    let that = this;
    that.setData({
      isShow: !that.data.isShow
    })
  },
});

wxml:

class="container">
    class="title">
        class="title_txt">消费详情
        class="title_icon" src="{
      {isShow ? 'https://file.snailpet.cn/23/a4/23a4787efd85b48db2102dcb51735e2c.png' : 'https://file.snailpet.cn/03/ad/03addd057eb67d09feef31894762d7f2.png'}}" bindtap="toChange"/>
    
    class="{
      {isShow? 'on':'content'}}">
        class='cost flex-colum lr-padding'>
            class='goods-cost flex-row'>
                class='cost-title text666-color'>共消费
                class='cost-detail tl-color-186 text-r text-over-ell'>class='main-color cost-m tl-color-186'>￥200
            
            class='goods-cost flex-row'>
                class='cost-title text666-color'>优惠金额
                class='cost-detail tl-color-186 text-r text-over-ell'>class='main-color cost-m tl-color-186'>￥50
            
            class='goods-cost flex-row'>
                class='cost-title text666-color'>苹果
                class='cost-detail text666-color text-r text-over-ell'>合计：class='main-color cost-m tl-color-186'>￥75
            
            class='goods-cost flex-row'>
                class='cost-title text666-color'>香蕉
                class='cost-detail text666-color text-r text-over-ell'>合计：class='main-color cost-m tl-color-186'>￥75
            
        
    

wxss:

.container .title {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     padding: 25rpx;
}
.container .title_txt {
    font-size: 34rpx;
    color: #2b2b2b;
}
.container .title_icon {
    display: block;
    width: 21rpx;
    height: 11rpx;
}

.content{
    height: 80rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    text-overflow: -o-ellipsis-lastline;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 0 25rpx;
    font-size: 30rpx;
    color: #888888;
}
.on{
    display: block;
    text-overflow: clip;
    overflow: visible;
}

 

转载于:https://www.cnblogs.com/bin521/p/11212657.html