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; 
    }
    
  • 相关阅读:
    Zookeeper
    RPC
    RabbitMQ学习总结
    ActiveMQ学习总结
    mybatis自动映射和手动映射
    oracle instantclient_12_2安装
    EFK(Elasticsearch+Filebeat+Kibana)收集容器日志
    prometheus-operator监控Kubernetes
    编译安装 keepalived-2.0.16.tar.gz
    Kubernetes pod平滑迁移
  • 原文地址:https://www.cnblogs.com/ievjai/p/14382669.html
Copyright © 2011-2022 走看看