zoukankan      html  css  js  c++  java
  • 微信小程序点击内容展开隐藏评论文章等

    背景

    在网上看到很多这样的,有很多这样的例子。

    https://gitee.com/dggy/expendable/tree/master
    比如上面这个大哥就是用的非常好的,但是有点冗余

    在这里插入图片描述

    在来看看这个,下面是效果图,可以参考下面的连接

    https://www.jb51.net/article/141882.htm

    在这里插入图片描述

    实际方案

    需要一个简单的,默认显示问题是一部分,点击后,显示的是全部的内容。再次点击回复到默认即可。

    在这里插入图片描述

    下面是部分代码

    // js
    isHide: true,
    
     showMoreMsg: function() { //点击显示全部内容
        this.setData ({
          isHide: !this.data.isHide
        })
      },
    
    
    // wxml
    <view class="{{isHide?'hide':'show'}}" bindtap="showMoreMsg">{{item.content}}</view>
    
    
    // wxss
    .hide {
      margin-top: 15rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; 
    }
    
    .show {
      margin-top: 15rpx;
      overflow: hidden;
      text-overflow: ellipsis; 
    }
    
  • 相关阅读:
    javascript Date format(js日期格式化)
    hcharts 教程
    UVA 10594 Data Flow
    UVA 10746 Crime Wave
    UVA 753 A Plug for UNIX
    UVA 11045 My T-shirt suits me
    UVA 10273 Eat or not to Eat?
    UVA 10806 Dijkstra, Dijkstra.
    UVA 10330 Power Transmission
    UVA 10803 Thunder Mountain
  • 原文地址:https://www.cnblogs.com/ievjai/p/14382669.html
Copyright © 2011-2022 走看看