歌手详情页

封装music-list组件

back返回键、bg-image图片层、title标题、song-list可滚动列表另封装

应用music-list组件

在singer-detail中引用，注册

    import MusicList from '@/components/music-list/music-list'

      components: { MusicList},

定义data放置

data() {
        return {
          songs: []
        }
      }

用计算属性拿到title和pic

computed: {
        pic () {
          return this.singer && this.singer.pic
        },
        title () {
          return this.singer && this.singer.name
        }
      },

传入模板中

	  <music-list
        :songs="songs"
        :title="title"
        :pic="pic"
      ></music-list>

设置图片高度

定义一个变量 图片高度初始0

data() {
        return {
          imageHeight: 0,
        }
      },

1.在dom元素绑定raf 用mounted拿到高度
2.设置一个动态style，定义scrollStyle，top值跟imageHeight一样

<div
        class="bg-image"
        :style="bgImageStyle"
        ref="bgImage"
      >

computed: {
        bgImageStyle() {
          return {
            backgroundImage: `url(${this.pic})`
          }
        },
        scrollStyle() {
          return {
            top: `${this.imageHeight}px`
          }
        }
      },
mounted() {
        this.imageHeight = this.$refs.bgImage.clientHeight
      },

加载效果

数据是异步获取的，在singer-detail中loading默认值为true，加载完变为flase，再传递给music-list

data() {
        return {
          songs: [],
          loading: true
        }
      },

async created() {
        const result = await getSingerDetail(this.computedSinger)
        this.songs = await processSongs(result.songs)
        this.loading = flase
      }

列表上下拉效果

实时获取滚动位置 监听滚动事件

:probe-type="3"
@scroll="onScroll"

定义scrollY：滚动的距离，在onScroll赋值

 onScroll(pos) {
          this.scrollY = -pos.y
        },

修改层级
1.定义常量

const RESERVED_HEIGHT = 40

2.定义变量：最大可滚动距离

maxTranslateY: 0

this.maxTranslateY = this.imageHeight - RESERVED_HEIGHT

(1)获取scrrolly，通过zIndex控制，如果滚动超过距离，提升层级
(2)设定宽高默认，动态改变
(3)translateZ解决ios兼容问题

bgImageStyle() {
          const scrollY = this.scrollY
          let zIndex = 0
          let paddingTop = '70%'
          let height = 0
          let translateZ = 0
  
          if (scrollY > this.maxTranslateY) {
            zIndex = 10
            paddingTop = 0
            height = `${RESERVED_HEIGHT}px`
            translateZ = 1
          }
  
          let scale = 1
          if (scrollY < 0) {
            scale = 1 + Math.abs(scrollY / this.imageHeight)
          }
  
          return {
            zIndex,
            paddingTop,
            height,
            backgroundImage: `url(${this.pic})`,
            transform: `scale(${scale})translateZ(${translateZ}px)`
          }
        },

模糊效果

css属性：backdrop-filter
监听scrollY变化，动态改变filter的style
1.默认不模糊
2.获取滚动距离，高度
3.判断，不能超过最大值
4.赋值

filterStyle() {
          let blur = 0
          const scrollY = this.scrollY
          const imageHeight = this.imageHeight
          if (scrollY >= 0) {
            blur = Math.min(this.maxTranslateY / imageHeight, scrollY / imageHeight) * 20
          }
          return {
            backdropFilter: `blur(${blur}px)`
          }
        },

刷新

将数据保存在本地，刷新之后也能直接用
good storage本地存储第三方库