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

分手后的思念是犯贱 2023-05-29 02:39 1阅读 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 条评论，1人围观）

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

相关阅读

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

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

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

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

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

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

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

我们先来看看效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

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

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

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

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

相关微信小程序---微信小程序点击navigator跳转无反应

通过navigator标签写的连接跳转无反应，原因就是要跳转的 url 最前面需要加斜杠。但是在app.json全局配置文件中配置页面路径时，前面是不允许加斜杠的，否则报

喜欢ヅ旅行/ 2022年11月06日 01:50/ 0 赞/ 643 阅读

相关 ElementUI 点击展开/隐藏

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

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

相关微信小程序点击分享功能

\[html部分\] < view class = "usermotto carDesc carDesc1"> <!-- <button class="user-mo

刺骨的言语ヽ痛彻心扉/ 2022年05月29日 01:48/ 0 赞/ 267 阅读

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

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

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

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

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

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

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

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

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