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; 
    }
    
  • 相关阅读:
    PL/SQL注册码
    分页sql
    js获取url值
    C语言中的bool类型 stdbool.h
    语音朗读小程序
    50. Pow(x, n)
    二维数组旋转
    用一位数组代替二维数组作为形参使用
    单链表排序——交换数据成员
    C++重载输入流、输出流运算符
  • 原文地址:https://www.cnblogs.com/ievjai/p/14382669.html
Copyright © 2011-2022 走看看