zoukankan      html  css  js  c++  java
  • uni-app 点击查看全部,再点击隐藏部分信息

    1、需要的效果如下:

             

    2、template:

    <template>
      <view class="content">
        <view class="containers">
          <view class="title">
            <view class="head-left"></view>
            <view class="head-right">订单信息</view>
          </view>
        <view class="dingdan-msg" v-for="(item, index) in orderInfoDetaiList" :key="index" :class="{active:flag}">
        <view class="dingdan-msg-contant">
          <view class="dingdan-msg-left">订单号</view>
          <view class="dingdan-msg-right">{{item.id}}</view>
        </view>
        <view class="dingdan-msg-contant">
          <view class="dingdan-msg-left">商户号</view>
          <view class="dingdan-msg-right">{{item.merId}}{{item.merName}}</view>
        </view>
          <view class="dingdan-msg-contant">
            <view class="dingdan-msg-left">清算金额</view>
            <view class="dingdan-msg-right">{{item.clearingAmount}}</view>
          </view>
          <view class="dingdan-msg-contant">
            <view class="dingdan-msg-left">清算时间</view>
            <view class="dingdan-msg-right">{{item.financeTime | timeStamp}}</view>
          </view>
          <view class="dingdan-msg-contant">
            <view class="dingdan-msg-left">异常状态</view>
            <view class="dingdan-msg-right">{{item.exceptionStatus}}</view>
          </view>
          <view class="dingdan-msg-contant">
            <view class="dingdan-msg-left">结果</view>
            <view class="dingdan-msg-right">{{item.status}}</view>
          </view>
        </view>
          <view class="show-or-noshow" @click = "showTag">{{flag?"收起":"查看全部"}}</view>
        </view>
      </view>
    </template>
    

    3、绑定要显示的高度样式:

    <script>
    	export default {
    		data() {
    			return {
    				flag: false,
    			};
    		},
          }
    </script>
    

    4、是否全部显示样式(默认隐藏):

    <style>
      //初始高度,超出隐藏 .dingdan-msg{ height: 450rpx; overflow: hidden; line-height: 70rpx; border-bottom: 1px dashed #E8E7E7; }   //高度自适应,全部显示 .active{ height: auto; overflow: visible; } </style>

    5、绑定 显示/隐藏 的点击事件:

    methods: {
        showTag(){
            this.flag = !this.flag;
        }, 
    }
    

      

  • 相关阅读:
    1、C#多线程基础理论
    ASP.NET MVC过滤器学习笔记
    C# 虚方法
    asp.net面试题总结1(未完待续。。。。)
    Linux高级调试与优化——进程管理和调度
    Linux高级调试与优化——内存管理
    Linux高级调试与优化——用户态堆
    Linux高级调试与优化——信号量机制与应用程序崩溃
    Linux高级调试与优化——gdb调试命令
    Nor Flash芯片特性分析
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/13594884.html
Copyright © 2011-2022 走看看