根据接口页面内容来展示内容的展示与收起

2019/09/13 web

内容展示全部与部分

内容数据由接口返回,内容大小不一定,视频,图片,语音,链接都有可能。内容的不一定,导致我们不能根据内容去判断,只能根据渲染的高度进行判断

需求描述

如果接口返回的内容很少,就不需要展开与收起两个字,如果内容超过一定高度,才会有?

看到这个需求的时候我懵逼了,接口有可能有图片,语音,链接,文字,或者什么都没有,根据接口返回的东西去判断,不可能,实现太麻烦了。而且面临即将上线,我做不到呀,想放弃

这时候就论有一个好领导的重要性了,拿着一支笔给我分析思路,分析了两遍我终于懂了并实现了,从中学到了很多东西,如果不是被指导了,我估计是做不出来;

给最外层的盒子设定一个最小高度,内容溢出就隐藏起来

计算最外层盒子的滚动高度(scrollHeight) ,如果小于元素设定的最小高度就不展示 展示与收起文字(默认就是不展示的,用绝对定位定在底部),如果大于就显示文字

点击展示文字的时候,最外层元素的高度设置为 auto ,展示文字变收起,把绝对定位改成 static ,在文档流的最底部展示

核心代码就几句,贴出大概的,不全,配合文字理解

<div class='wrapper-detail' ref='detail'>
  <div>
    图片,文字,链接,语音,视频内容
  </div>
  <p @click="allData" ref='allData' class='all-data' v-if='hiddenDetail'>
    
    <i class="iconfont"> </i>
  </p>
  </div>
</div>
  created () {
    this.getDetail()
  },
  methods:{
     getDetail () {
       api.then(res=>{
         this.$nextTick(()=>{
           const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
      const detail = this.$refs.detail
      this.hiddenDetail = detail.scrollHeight > 100
      if (!this.hiddenDetail) {
        detail.style.height = '100%'
        detail.style.marginBottom = '0'
      }
         })
       })
     },
        allData () {
      if (this.lookAll) {
        this.$refs.detail.style.height = 'auto'
        this.$refs.allData.style.position = 'static'
        this.$refs.allData.style.paddingTop = '0'
        this.lookAll = false
      } else {
        this.$refs.detail.style.height = '110px'
        this.$refs.allData.style.position = 'absolute'
        this.lookAll = true
      }
    },
  }

注意了:一定要在或许到数据,dom 更新之后在去获取滚动的高度,否则会有异步问题,this.$refs 报错,也不能在 created mounted 获取因为此时 dom 还没有渲染,也会报错 我是直接用 js 去修改样式的,可以通过 css 去改变;

三句话就能解决了,可是我自己确很久很久都想不出来,没有头绪,没有思路。或许是自己基础太差了吧。在未来还不知道会遇到多少这样类似的问题,等着我去解决

题外话,现在回过头来看看,不难,只是我自己不会。不得不正视自己一个布局样式基础不行的问题,在工作中经常碰到,但是同事们都能够轻松驾驭。是我学习的榜样,但愿不久之后我也能像他们一样写出很好,很优美的代码。现在看看自己写的代码就像一坨屎,同事们写组件,对组件的认识可以抛我 10 条街了,很喜欢现在的同事,技术比我强多了,我跟着学到了很多,以前一遇到难题就逃避,不想解决,伸手党慢慢的改了很多,因为我知道同事更加喜欢可以自己动手解决问题的,喜欢学习的。喜欢现在的工作环境和同事哈哈哈


一名伪程序猿——sunseekers,曾被bug虐的体无完肤,却依旧待他如初恋。

如果我改过的某一个bug,吐槽过的某一个需求,写过的某一行代码

曾在你的心里荡起涟漪,那至少说明在逝去的岁月里,我们在某一刻,共同经历着一样的情愫。

有时候,虽然素未谋面。却已相识很久,很微妙也很知足。


如果你喜欢我写过的某一个文字,请支持我,鼓励我,你的鼓励是我最大的动力来源

当然恰好你也喜欢我的话,我们可以互相关注,相互学习的哟!

sunseekers

Search

    Table of Contents