实现详情页-电影介绍信息隐藏显示的效果

要实现的效果图示：

文字描述：当点击向下箭头，内容显示，当点击向上箭头，内容隐藏

实现思路：

（1）刚开始设置一个只能显示两行的盒子：这是没有设置"溢出隐藏"属性时的样子：

此时当你设置了溢出隐藏，那就是上面动态图隐藏起来的效果：

.introduction{margin-top: 13px;//这个高和行高只能显示出两行的内容height: 1.875rem;line-height: .9375rem;overflow: hidden;
}

效果：

所以这样看，那动图上的两种隐藏显示的效果，其实就是取决于设不设置"overflow:hidden"溢出隐藏这个样式。

（2）按照第一步的思路，就是通过设置溢出隐藏属性来变换效果，所以这个属性需要动态绑定，也就是当点击小箭头时能实现绑定和解绑。

关键点：
整个功能的关键点就是isHidden值如何变化，刚开始设置初始值true，是不显示的；然后不显示时的样式：overflow: hidden;当点击箭头，整个isHidden就取反，然后就是显示内容时的样式。

代码：

<div class="grey-text introduction" :class="isHidden?'hidden':''">{{filmInfo.synopsis}}
</div>
<div style="text-align:center;">
<span @click='isHidden=!isHidden' class="iconfont" :class="isHidden? 'icon-xiangxiazhankai':'icon-shouqi'"></span>
</div>data () {return {filmInfo: null,isHidden: true}}.grey-text{font-size: 13px;color: #797d82;margin-top: 4px;}
.introduction{margin-top: 13px;height: 1.875rem;line-height: .9375rem;
}
.hidden{overflow: hidden;
}

结果：

不显示内容时：

显示内容时：

这里会发现一个问题，就是当显示内容时，这个箭头就会被内容挡住在第三行的位置显示，而不是在最下面显示。

这个问题的原因是，我们刚开始不显示内容时设置了一个盒子的高度：height: 1.875rem;这个高度被我们给设置死了，所以当内容显示时，盒子还是存在高度的，那么这个箭头就上去了。

解决办法是：

把这个盒子的高度给设置成动态的属性，当内容不显示时，有盒子的高度，当内容显示时，不设置盒子的高度，让内容自动撑开，这样箭头也会被挤到内容的下面去。

代码：

.introduction{margin-top: 13px;line-height: .9375rem;}.hidden{overflow: hidden;height: 1.875rem;
}

就把introduction里的高度放在hidden样式中，让内容隐藏时，设置盒子高度。其他的代码不变。

结果：

不显示内容时：

显示内容时：

实现详情页-电影介绍信息隐藏显示的效果相关推荐

PHP js 点击按钮切换模版,javascript点击按钮实现隐藏显示切换效果_javascript技巧...
本文实例分享了点击按钮实现隐藏和显示的切换代码,供大家参考,具体内容如下效果图: 在不少应用中,都有这样的功能,点击同一个按钮可以实现一个元素的显示和隐藏的切换,下面就通过代码实例介绍一下如何实现此 ...
transition实现隐藏显示菜单栏效果
今天使用<transition>标签做了隐藏显示菜单栏的效果,下面和小编一起来看看如何实现吧我们知道<transition>标签是用来做动画效果的,把菜单栏的隐藏和显示看做一 ...
关于电商商品数据API接口列表，你想知道的（详情页、Sku信息、商品描述、评论问答列表）
目录一.商品数据API接口列表二.商品详情数据API调用代码item_get 三.获取sku详细信息item_sku 四.获得淘宝商品评论item_review 五.数据说明文档进入一.商品数 ...
如何爬取商品详情页中的信息
如下图,我们要爬取标题和价钱和区域等 1.导入库 from bs4 import BeautifulSoup import requests import time 2.抓取整个HTML网页(增加判断 ...
python爬虫今日头条街拍美图开发背景_分析Ajax请求并抓取今日头条街拍美图：爬取详情页的url与实际页面上显示不符...
from urllib.parse import urlencode import re from requests.exceptions import RequestException from b ...
信息隐藏技术综述——粗浅入门
本文为2017年十一月做的关于信息隐藏技术的PPT汇报的配套讲稿,相关参考资料已上传至 (http://download.csdn.net/download/sir_chai/10104787) 第一 ...
Lua+Redis+OpenResty实现电商详情页
电商详情页案例介绍电商的详情页是并发量很高的服务,开发者通常采用静态化或缓存的方式减少后台服务器的压力案例的技术点: OpenResty服务器, 介绍和安装可以参考 https://blog.cs ...
电商项目商品详情页架构设计
当用户进入京东首页,点击搜索手机进入搜索页面,点击一款手机进入商品详情页面,主要展示商品的信息,主要分为三块信息: 1:基本信息:展示商品的基本信息,包括sku价格等基本信息. 2:商品描述(商品详情 ...
网页信息隐藏及一种方法
信息隐藏技术: 按载体的不同分为图像.视频.声音和文本等数字媒体的信息隐藏技术. 目前的研究集中在以静止图像.音频及视频为载体的数字媒体上,针对文本信息隐藏技术的研究较少.文本载体的信息冗余太少,不适 ...

实现详情页-电影介绍信息隐藏显示的效果

实现详情页-电影介绍信息隐藏显示的效果相关推荐

最新文章

热门文章