zoukankan      html  css  js  c++  java
  • 小程序展开收起

    效果图:

    js:

    // 获取全局应用程序实例对象
    var app = getApp();
    
    // 创建页面实例对象
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        isShow: false, //控制收起展开
        },//控制收起展开
         toChange: function () {
        let that = this;
        that.setData({
          isShow: !that.data.isShow
        })
      },
    });

    wxml:

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

    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;
         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;
    }
  • 相关阅读:
    HDU 2236 无题Ⅱ
    Golden Tiger Claw(二分图)
    HDU 5969 最大的位或 (思维,贪心)
    HDU 3686 Traffic Real Time Query System (图论)
    SCOI 2016 萌萌哒
    Spring Boot支持控制台Banner定制
    构建第一个Spring Boot程序
    Spring Boot重要模块
    Java fastjson JSON和String互相转换
    BCompare 4 Windows激活方法【试用期30天重置】
  • 原文地址:https://www.cnblogs.com/bin521/p/11212657.html
Copyright © 2011-2022 走看看