样式

音乐列表

音乐列表需要一个滚动的效果，因此再次借助了BetterScroll
创建一个scroll的组件

<template><div ref="scroll"><slot></slot></div>
</template><script>
import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
export default {name:'Scroll',data() {return {scrollVal:null}},created(){},mounted() {BScroll.use(ObserveDOM)this.scrollVal = new BScroll(this.$refs.scroll,{probeType: 3,pullUpLoad: true,observeDOM:true,click:true,mouseWheel: true,//开启鼠标滚轮disableMouse: false,//启用鼠标拖动disableTouch: false//启用手指触摸})this.scrollVal.on('scroll', (positon) => {// 发射出scroll方法，可以实时获取移动的距离this.$emit('scroll',positon)})},updated() {},methods: {},}
</script><style></style>

借助scroll返回的方法实现样式滚动效果

<template><div class="album"><div class="music-list"><div class="back"><i @click="$router.go(-1)" class="icon-back"></i></div><h1 class="title">{{albumData.title || albumData.name}}</h1><div class="bg-image" :style="bgImageStyle" ref="bgImg"><div class="play-btn-wrapper" :style="playBtnStyle"><div class="play-btn"><i class="icon-play"></i><span class="text" @click="randomPlay">随机播放全部</span></div></div><div class="filter" :style="filterStyle"></div></div><!-- 列表 --><scroll class="list"   @scroll="onScroll" :style="scrollStyle"><song-list :songs='songs' @select="selectSong"></song-list> </scroll></div></div>
</template><script>
import songList from '@/component/song-list/song-list.vue'
import Scroll from '../../component/scroll/scroll.vue'
export default {components: { songList, Scroll },name:'Album',data() {return {  head_hight:40,scrollY:'',imgHeight:'',maxTransLateY:''}},props:{songs:{type:Array,default:()=>[]},albumData:{type:Object,default:()=>{}}},watch:{songs(newVal){console.log(newVal);}},// 在dom结构加载完毕之后进行获取scroll可向上移动的最大距离mounted() {this.imgHeight = this.$refs.bgImg.clientHeightthis.maxTransLateY = this.imgHeight - this.head_hight},computed:{// 顶部背景// 动态变化顶部背景样式bgImageStyle(){let height = 0let zIndex = 0  let paddingTop = '70%'// 当拖动距离大于最大移动距离时// 则将顶部的图片层级提高，这样就可以阻止scroll继续向上，从而开始内部向上滚动// 并且将height高度固定if(this.scrollY>this.maxTransLateY){zIndex = 10height = '40px'paddingTop = 0}let scale = 1// 拖动y轴小于0时，则开始按比例进行设置缩放数值if(this.scrollY<0) {scale = 1+ Math.abs(this.scrollY/this.imgHeight)}return {zIndex,height,paddingTop,backgroundImage: `url(${this.albumData.pic})`,transform:`scale(${scale})translateZ(1px)`}},// scroll定位scrollStyle() {const bottom = this.songs.length ? '60px' : '0'return {top: `${this.imgHeight}px`,bottom}},// 随机播放按钮样式playBtnStyle() {let display = ''if(this.scrollY>=this.maxTransLateY) display = 'none'return {display}},// 高斯模糊filterStyle(){let blur = 0if(this.scrollY>0){// 这样即可控制最大的模糊程度blur = Math.min(this.maxTransLateY/this.imgHeight,this.scrollY/this.imgHeight)*20}return {backdropFilter: `blur(${blur}px)`}}},methods: {// 滚动时间onScroll(pos){this.scrollY = -(pos.y)},// songs点击selectSong(index){let songs = this.songsthis.$store.dispatch('selectPlay',{songs,index})},// 随机播放randomPlay(){let songs = this.songsthis.$store.dispatch('randomPlay',songs)}},
}
</script><style lang='scss' scoped>
.album {position: fixed;z-index: 10;top: 0;left: 0;bottom: 0;right: 0;background: $color-background;
}
.music-list {position: relative;height: 100%;.back {position: absolute;z-index: 20;top: 0;left: 6px;.icon-back {display: block;padding: 10px;color: $color-theme;font-size: $font-size-large-x;}}.title {position: absolute;z-index: 20;top: 0;left: 10%;width: 80%;text-align: center;line-height: 40px;color: $color-theme;font-size: $font-size-large;@include no-wrap();}.bg-image {position: relative;width: 100%;background-size: cover;.play-btn-wrapper {position: absolute;bottom: 20px;z-index: 20;width: 100%;.play-btn {box-sizing: border-box;width: 135px;padding: 7px 0;margin: 0 auto;text-align: center;border: 1px solid $color-theme;border-radius: 100px;font-size: $font-size-medium;color: $color-theme;}}.filter {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgba(7, 17, 27, .4);}}.list {position: absolute;bottom: 0;width: 100%;z-index: 0;}
}</style>

【笔记】vue2.0音乐app——音乐列表以及BetterScroll滚动效果相关推荐

Vue2.0+SVG实现音乐播放圆形进度条组件，传入实时百分比实现圆圈进度动画效果
vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果需求分析: 类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度. progress-cir ...
VUE获取网易云音乐接口，并实现歌词滚动效果
VUE获取网易云音乐接口,并实现歌词滚动效果最近在捣腾个人博客,加了个播放音乐的模块,所以在这里记录一下歌曲播放歌词实时滚动效果的实现,顺便总结加深一下对各个知识点的理解. GitHub地址演示地 ...
vue2.0 实现汉字A-Z排序与手机通讯录效果
vue2.0 实现汉字A-Z排序与手机通讯录效果先上一张效果图: 列表html template (使用 ydui移动端UI , 地址:http://vue.ydui.org/) <yd-ce ...
android9.0谷歌app删除列表,谷歌安卓9.0系统彻底移除通话录音功能
对于部分国内用户来说刚需的"通话录音"功能,在安卓9.0系统当中已经被谷歌完全干掉了. 据报道,其实谷歌在安卓6.0系统中就已经开始移除通话录音API,但是开发者可以自行开辟方法, ...
vue2.0 实现汉字A-Z排序与手机通讯录效果
先上一张效果图: 列表html template (使用 ydui移动端UI , 地址:http://vue.ydui.org/) <yd-cell-group v-for="i ...
HTML通知、新闻等文字列表的无缝滚动效果
这里推荐使用开源jQuery插件SuperSlide,下载链接:http://www.superslide2.com/downLoad.html 使用方法非常简单,以下为一个实例 <%@ pag ...
基于vue2.0+ 抽奖项目
前言临近年关抽奖活动,基于vue2.0+开发的抽奖项目. 便于查看效果,贴上相关地址: 在线示例地址:快速访问 github地址:查看源码简介基于vue.js抽奖项目,截屏保存每次抽奖图片至本地 ...
【笔记-vue】《imooc-vue.js高仿饿了么》、《imooc-vue 音乐app》、《imooc-vue.js源码全方位解析》
20170709 - 20171128:<imooc-vue.js高仿饿了么> 一.第一章课程简介 1-1课程简介 1.需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译 ...
Vue2.0+vuex+H5实现音乐播放及歌曲切换功能的方法及原理解释
最近在用mint-ui重写一个vue.js音乐App项目,做到播放器模块,感觉挺有意思,记录一下播放器歌曲播放及歌曲切换功能实现方法及原理. 先上一张运行效果图(歌词尚未抓取.播放进度条及时间尚未开发 ...
歌单详情内容-图标列表（音乐app项目-第7步）
在上一节歌单详情内容-顶部 (音乐app项目-第6步)_Zhichao_97的博客-CSDN博客的基础上,继续实现详情页的图标列表,效果如下图标注区域所示: 流程: 1.在iconfont官网添加所需 ...

【笔记】vue2.0音乐app——音乐列表以及BetterScroll滚动效果

文章目录

样式

音乐列表

借助scroll返回的方法实现样式滚动效果

【笔记】vue2.0音乐app——音乐列表以及BetterScroll滚动效果相关推荐

最新文章

热门文章