点击查看全部图片（类似头条效果）

结果展示：

1.设计思路

判断文章内容的高度，若大于1200px则直接设置文章的最大高度为580px, 超出部分直接 display: hidden
查看全部图片直接相对定位放在文章底部，只有文章内容大于1200px才显示，否则display: none
查看全部图片设置点击事件，并进行状态切换即可

应用代码：

import React, { Component } from 'react';
import bootstrap from '../../../framework/base';
import Header from '../../../component/header';
import Sidebar from '../../../component/sidebar';
import './index.scss'
import { ContentFormatter, Rec1Header, AInsert, Comment  } from '../../../component/index';interface Props {isMobile?: boolean,value?: any,commentData?: any,}class Qacontent extends Component<Props, any> {articlecontent:any;image1:any;openscroll:any;constructor(props) {super(props)this.state = {show:{display: "none"},scrollhidden: {overflow: "scroll"}}this.articlecontent = React.createRef();this.image1 = React.createRef();this.openscroll = React.createRef();}/**点击查看全部 */private seeNone = () => {this.setState({show: {display: "none",},scrollhidden: {overflow: "scroll"}})} // 判断文章内容是否超出componentDidMount() {if (this.articlecontent.current.clientHeight > 1200) {console.log(this.articlecontent.current.clientHeight)this.setState({show: {display: "block"},scrollhidden: {overflow: "hidden",maxHeight: "580px"}})}}render() {const { value = {}, commentData = {}, isMobile } = this.props;const { origin, content, videos, attach } = value;return (<div className="outerWrapper"><Header current={3} isMobile={true}/><div className="content"><div className="content-article content-qa-content" style={ this.state.scrollhidden } ><h1 ref={image => { this.image1 = image; }}>{value.subject}</h1><ContentFormatter isMobile={isMobile} origin={origin} attach={attach} text={content} videos={videos} ref={this.articlecontent}/><Comment info={commentData} isMobile={true} keyword={'回答'} otheranswer={true}/><div  className="unfold-field" onClick={this.seeNone} style={this.state.show}><div className="unflod-field_mask"></div><div className="unfold-field_text"><span>查看全部图片</span></div></div></div><div className="fixblock" style={this.state.show} ><Comment  info={commentData} isMobile={true} keyword={'回答'} otheranswer={true}/></div></div><Sidebar /></div>);}
}export default bootstrap(Qacontent);

@import '../../../asset/css/mixins';
@import '../../../asset/css/reset';
@import '../../../asset/css/rem';.content {margin: auto;width: px2rem(670);overflow-y: scroll;overflow-x: hidden;font-size: 0;position: relative;top: 0;left: 0;.content-article {position: relative;h1 {padding: px2rem(40) 0 px2rem(0) 0;font-family: PingFangSC-Medium;font-size: px2rem(32);color: #2B3547;line-height: px2rem(56);}.content-header {.recommend1-header {margin-top: 0;}}.unfold-field {position: absolute;bottom: px2rem(20);font-size: 0;left: 0;width: 100%;max-width: px2rem(670);height: px2rem(260);.unflod-field_mask {height: px2rem(200);width: 100%;background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,hsla(0,0%,100%,0)),to(#fff));background-image: linear-gradient(-180deg,rgba(255, 255, 255, 0),#fff);}.unfold-field_text {height: px2rem(98);width: 100%;background-color: rgb(255, 255, 255);text-align: center;span{font-family: PingFangSC-Medium;font-size: px2rem(28);color: #3B99FF;letter-spacing: 0;text-align: center;line-height: px2rem(28);}}}}.content-qa-content {width: 100%;max-width: px2rem(670);.m-article-content{margin-top: px2rem(0);}}.fixblock {position: relative;}
}

点击查看全部图片（类似头条效果）相关推荐

安卓直接展示html,Android textView展示html图片，实现图文混排，点击查看大图片
Android textView展示html图片,实现图文混排,点击查看大图片最近要展示html在textView上,实现图文混排,并且图片可以点击放大,所以去研究了一下,效果图如下: 我们知道te ...
Android 全景照片查看,Android图片处理教程之全景查看效果实现
Android图片处理教程之全景查看效果实现发布时间:2020-08-24 13:48:14 来源:脚本之家阅读:104 作者:CMusketeer 前言在玩头条的时候,现在我们会发现有很多的全 ...
uniapp点击图片放大_想要放大镜将图片放大的效果？你只需这么做即可！
[每天楞一点]的第 46 个知识效果图: 在PicsArt中打开图片,点击[工具]--[图形剪辑]. 选择圆形,通过缩放双指,将其大小调整至合适. 完事后,点击右上角的箭头. 将边框颜色设置为黑色, ...
小红书怎么点击查看大图_小红书图片如何调整呢？
该楼层疑似违规已被系统折叠隐藏此楼查看此楼一.首图 1.重要性多图发布是当下小红书社区笔记的常态.图片上限为9张,建议博主一次发6~9张图,"仟人仟面"小红书运营主管小萍告诉 ...
elementui 使用el-image 控件解决通过点击查看按钮两次才能实现预览图片
需求:点击查看按钮,将图片显示出来. 问题:查看按钮必须触发两次才会将图片显示出来前端效果: 点击查看按钮,弹出来图片图片展示: 解决方法有两种: 第一种调用Image 的源码中的image-v ...
android webview加载html图片自适应手机屏幕大小点击查看大图
我们在开发中,显示信息详情时,一般后台会给出html文本,在android端一般采用webview控件来展示,但是后台给出的html文本一般是给电脑端用的,没有自适配手机,导致手机端图片显示过大,需要 ...
安卓 webview加载html图片自适应手机屏幕大小和点击查看大图
我们在开发中,显示信息详情时,一般后台会给出html文本,在android端一般采用webview控件来展示,但是后台给出的html文本一般是给电脑端用的,没有自适配手机,导致手机端图片显示过大,需要 ...
基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=&qu ...
Android仿今日头条图片滑动退出效果
资源下载(2C币) 逛CSDN的时候,看到几篇写仿今日头条图片滑动退出效果的文章,闲着无聊便想着也给自己项目加上,实现的思路有很多种,本着就近原则选了一篇与自己思路相近的文章结合自己的实践总结一下. ...

点击查看全部图片（类似头条效果）

点击查看全部图片（类似头条效果）相关推荐

最新文章

热门文章