小程序实现展开/收起的效果示例


Posted in Javascript onSeptember 22, 2018

前言:本章说下文字内容的展开与收起的实现,要实现这么一个效果:当收起的时候隐藏并显示省略号,当展开的时候显示全部文字。

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 中的文字我们默认收起状态且只展示两行

.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、小结

这样我们就实现了文本框的展开/收起效果,当收起的时候显示省略号并隐藏,当展开的时候展示全部文字。

当然,不仅仅是文字的收起与展开,里面放其它的内容也是可以的,根据需求来应对了;还有就是可以加个动画之类的完善一下交互效果,感兴趣的朋友可以自己鼓捣。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
JQuery伸缩导航练习示例
Nov 13 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 Javascript
玩转vue的slot内容分发
Sep 22 #Javascript
vue 巧用过渡效果(小结)
Sep 22 #Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 #Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 #Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 #Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 #Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 #Javascript
You might like
php session安全问题分析
2011/06/24 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python写的一个文本编辑器
2014/01/23 Python
python实现哈希表
2014/02/07 Python
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
Python Collatz序列实现过程解析
2019/10/12 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
颁奖晚会主持词
2014/03/25 职场文书
《画》教学反思
2014/04/14 职场文书
2014年党支部工作总结
2014/11/13 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
为Centos安装指定版本的Docker
2022/04/01 Servers