微信小程序-点击内容展开隐藏评论文章等

分手后的思念是犯贱 2023-05-29 02:39 20阅读 0赞

# 背景 #

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

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

![在这里插入图片描述][20191101161920850.png]

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

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

![在这里插入图片描述][20191101161943876.png]

# 实际方案 #

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

![在这里插入图片描述][20191101162248667.gif]

下面是部分代码

// 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; 
    }

[20191101161920850.png]: https://img-blog.csdnimg.cn/20191101161920850.png?
[20191101161943876.png]: https://img-blog.csdnimg.cn/20191101161943876.png?
[20191101162248667.gif]: https://img-blog.csdnimg.cn/20191101162248667.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序点击控制元素的显示与隐藏

微信小程序点击控制元素的显示与隐藏首先我们先来看一下单个点击效果 ![1334878-20190918151621534-728137087.png][] ![

朴灿烈づ我的快乐病毒、/ 2023年08月17日 15:32/ 0 赞/ 118 阅读

相关小程序文章内容展开收起

动态改变文章内容（多篇或单片）处理方式：通过小程序中SelectorQuery()选择器方法获取文章内容高度，通过默认收起状态最大高度判断是否显示展开按钮如果超出

╰+攻爆jí腚メ/ 2023年06月17日 07:58/ 0 赞/ 30 阅读

相关微信小程序-点击内容展开隐藏评论文章等

背景在网上看到很多这样的，有很多这样的例子。 > https://gitee.com/dggy/expendable/tree/master > 比如上面这个大哥

分手后的思念是犯贱/ 2023年05月29日 02:39/ 0 赞/ 21 阅读

相关微信小程序点击显示或隐藏对应的图标

首先放一下我的效果图： ![显示对应图标效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

不念不忘少年蓝@/ 2023年05月21日 13:59/ 0 赞/ 23 阅读

相关微信小程序实现评论多级展开收起以及点赞功能

我们先来看看效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

短命女/ 2023年02月16日 01:54/ 0 赞/ 209 阅读

相关微信小程序点击左侧列表显示右侧内容

效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

谁践踏了优雅/ 2022年12月13日 12:58/ 0 赞/ 261 阅读

相关 ElementUI 点击展开/隐藏

一、概述在项目，需要使用一个功能，点击某个按钮，展开/隐藏某些说明文字。二、项目演示新建一个vue项目，安装ElementUI 模块即可。新建test

蔚落/ 2022年10月29日 03:17/ 0 赞/ 432 阅读

相关微信小程序点击激活类

闲暇之余研究了一下微信小程序，想做一个点击切换的效果，如下所示： ![70][] 点击之后可以激活相应的类，效果如图： ![70 1][] 没有头绪的时候觉

- 日理万妓/ 2022年05月23日 12:26/ 0 赞/ 239 阅读

相关微信小程序-点击按钮内容显示和隐藏，并且文字改变

wxml:  <view class="more" bindtap="showedit">{ {editText}}</vie

旧城等待，/ 2022年03月16日 17:19/ 1 赞/ 1720 阅读

相关微信小程序实现点击空白隐藏

怎样实现jq中的slideUp或者slideDown这种动画效果呢，我的思路是用css3的transform: translateY（）属性，给需要动画的元素添加上一个动画cl

た入场券/ 2022年03月08日 02:50/ 0 赞/ 474 阅读