小程序 — 展开/收起

前言:本章说下文字内容的展开与收起的实现,要实现这么一个效果:当收起的时候隐藏并显示省略号,当展开的时候显示全部文字。 GitHub:https://github.com/Ewall1106/miniProgramDemo 先看下效果图:

小程序 — 展开/收起

1、结构样式

(1)首先我们定义一下html结构:

<view class="container">
  <view class="title">
    <text class="title_txt">标题标题</text>
    <image class="title_icon" src="/assets/images/arrow_up.png" />
  </view>
  <view class="content">  
    我所有的自负皆来自我的自卑,所有的英雄气概都来自于我的软弱。嘴里振振有词是因为心里满是怀疑,深情是因为痛恨自己无情。这世界没有一件事情是虚空而生的,站在光里,背后就会有阴影,这深夜里一片寂静,是因为你还没有听见声音。
  </view>
</view>

内容摘抄至马良《告坦白书》中我一段喜欢的文字。

(2)less样式:

  • 标题title就是一个简单的flex布局;
  • 内容content中的文字我们默认收起状态且只展示两行,更多css技巧:CSS日常踩坑后的总结
.container {
  .title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 25rpx;
    .title_txt {
      font-size: 34rpx;
      color: #2b2b2b;
    }
    .title_icon {
      display: block;
      width: 21rpx;
      height: 11rpx;
    }
  }
  .content {
    height: 80rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    text-overflow: -o-ellipsis-lastline;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 0 25rpx;
    font-size: 30rpx;
    color: #888888;
  }
}

(3)这样我们就实现了一个默认布局样式

收起状态

2、添加点击事件

(1)首先我们应该在data中定义一个变量isShow用来控制样式的切换,默认为收起状态(即不展示)。

data = {
  isShow: false
};

(2)在箭头icon上添加一个点击事件,当点击的时候对isShow做取反操作;

toggle() {
  this.isShow = !this.isShow;
  this.$apply();
}

3、样式动态切换

(1)首先是image箭头图片的切换(注意是如何动态的切换本地图片的)

<image class="title_icon" src="{{isShow ? '/assets/images/arrow_down.png' : '/assets/images/arrow_up.png'}}" @tap="toggle" />

(2)然后我们定义一个展开的样式,根据isShow的状态值动态的切换样式

<view class="content {{isShow ? 'on' : ''}}">
  我所有的自负皆来自我的自卑,所有的英雄气概都来自于我的软弱。嘴里振振有词是因为心里满是怀疑,深情是因为痛恨自己无情。这世界没有一件事情是虚空而生的,站在光里,背后就会有阴影,这深夜里一片寂静,是因为你还没有听见声音。
</view>

.content.on {
  display: block;
  text-overflow: clip;
  overflow: visible;
}

4、小结

  • 这样我们就实现了文本框的展开/收起效果,当收起的时候显示省略号并隐藏,当展开的时候展示全部文字。
  • 当然,不仅仅是文字的收起与展开,里面放其它的内容也是可以的,根据需求来应对了;还有就是可以加个动画之类的完善一下交互效果,感兴趣的朋友可以自己鼓捣。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小芭乐的专栏

markdown编辑器书写格式说明

GFM 是 Github 拓展的基于 Markdown 的一种纯文本的书写格式。

3530
来自专栏Coco的专栏

你所不知道的 CSS 滤镜技巧与细节

2625
来自专栏达摩兵的技术空间

动态内容的等高布局实现

首先不同内容的固定高度等高布局没有任何难度,本文讲的不是这种。本文讲的是,不同行级或者浮动元素具有不定高度时,将其他元素的高度填充为最大高度元素的高度这种场景。

823
来自专栏一“技”之长

iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程

        众所周知,绚丽动画效果是iOS系统的一大特点,通过UIView层封装的动画,基本已经可以满足我们应用开发的所有需求,但若需要更加自由的控制动画的...

1933
来自专栏成长道路

html 边框变粗 margin -1px

最近刚开始学习web前端,html和css,对于遇到的边框变粗的问题,用margin为负值解决问题发表一些自己的理解 首先我们来看看下面一张图片 ? lis...

2560
来自专栏mukekeheart的iOS之旅

IOS开发之尺寸

  在移动端或者前端开发中,UI图通常是带标注的,指定某个控件的长宽等属性,一般UI给的是68px,72px这样的样式,但是我们在开发过程中通常又并不是完全按照...

1474
来自专栏Coco的专栏

【CSS3进阶】酷炫的3D旋转透视

2164
来自专栏前端儿

细说移动端 经典的REM布局 与 新秀VW布局

说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等...

2252
来自专栏九彩拼盘的叨叨叨

Web动画性能介绍

帧率(FPS):描述每秒播放的帧数,单位为 Hz 或者 frame/s (帧/秒)。

1023
来自专栏数据小魔方

图表中包含负值的双色填充技巧

今天教大家怎么在Excel里制作带负值的双色填充图表 正负值双色填充 ▼ 通常如果数据中带负值 默认的图表输出虽然能够显示负值 但是负值颜色与正值并没有任何区别...

2556

扫码关注云+社区