客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称：vue-music-webapp开源软件地址：https://gitee.com/LenGxinLove/vue-music-webapp开源软件介绍：Vue全家桶 简易版QQ音乐webApp项目查看运行：1. 克隆项目并安装依赖$ git clone https://gitee.com/LenGxinLove/vue-music-webapp.git$ cd vue-music-webapp$ npm install2. 运行api接口$ cd ./server$ node app3.预览项目：$ npm run serve功能：
功能演示：1. 换肤
2. 歌手列表
3. 搜索
功能实现介绍：1. 换肤功能换肤是 css自定义变量拥有像less/sass那种定义变量并使用变量的能力，声明变量的时候，变量名前面要加两根连词线（--），在使用的时候只需要使用var()来访问即可 @import url('./variable.less');body { --theme-color: @color-theme; --theme-bg-color: @color-theme; --bg-color: @background-color; --shortcut-color: @background-shortcut-color; --text-color: @text-color;}如果要局部使用，只需要将变量定义在元素选择器内部即可。具体使用详见使用CSS变量 使用
// 换肤document.body.style.setProperty('--theme-color', skin.name === '炫酷黑' ? '#B82525' : skin.color)document.body.style.setProperty('--theme-bg-color', skin.color)document.body.style.setProperty('--bg-color', skin.name === '炫酷黑' ? skin.color : '#fff')document.body.style.setProperty('--shortcut-color', skin.name === '炫酷黑' ? '#333' : '#f2f3f4')document.body.style.setProperty('--text-color', skin.name === '炫酷黑' ? '#FFF' : '#333')2. better-scroll移动端scroll神器<template> <div ref='scroll' class="scroll-view"> <div> <Loading :show="downLoading" /> <slot></slot> <Loading :show="upLoading" /> </div> </div></template><script>import BScroll from 'better-scroll'import Loading from 'baseUI/Loading'// import { debounce } from 'utils'export default { name: 'Scroll', components: { Loading }, props: { probeType: { type: Number, default: 1 }, click: { type: Boolean, default: true }, listenScroll: { // 监听滚动事件 type: Boolean, default: false }, pullUp: { // 开启上拉事件 type: Boolean, default: false }, pullDown: { // 开启下拉事件 type: Boolean, default: false }, bounceTop: { // 允许下拉 type: Boolean, default: true }, bounceBottom: { // 允许上拉 type: Boolean, default: true }, upLoading: { // 开启下拉loading type: Boolean, default: false }, downLoading: { // 开启上拉loading type: Boolean, default: false }, refreshDelay: { type: Number, default: 20 } }, mounted () { this._initScroll() }, methods: { _initScroll () { // Options 参数 const { probeType, click, bounceTop, bounceBottom } = this.$props // Events 事件 const { listenScroll, pullUp, pullDown } = this.$props if (!this.$refs.scroll) return this.bScroll = new BScroll(this.$refs.scroll, { probeType: probeType, click: click, stopPropagation: true, // 是否启用上下拉效果 bounce: { top: bounceTop, bottom: bounceBottom } }) // 监听滚动事件 if (listenScroll) { this.bScroll.on('scroll', pos => { this.$emit('scroll', pos) }) } // 触底事件 if (pullUp) { this.bScroll.on('scrollEnd', () => { if (this.bScroll.y <= (this.bScroll.maxScrollY + 50)) { // debounce(() => { // this.$emit('pullUp') // }, 200) this.$emit('pullUp') } }) } // 上拉事件 if (pullDown) { this.bScroll.on('touchEnd', (pos) => { if (pos.y > 50) { // debounce(() => { // this.$emit('pullDown') // }, 200) this.$emit('pullDown') } }) } }, refresh () { this.bScroll && this.bScroll.refresh() }, scrollTo () { this.bScroll && this.bScroll.scrollTo.apply(this.bScroll, arguments) }, scrollToElement () { this.bScroll && this.bScroll.scrollToElement.apply(this.bScroll, arguments) } }, watch: { data () { setTimeout(() => { this.refresh() }, this.refreshDelay) } }}</script><style lang="less"> .scroll-view { height: 100%; overflow: hidden; }</style>3. Animate.css动画库引入使用 yarn add animate.css在 import animated from 'animate.css'Vue.use(animated)页面使用示例： <template> <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" > <div class="loading" v-if="show"> <div></div> <div></div> <div></div> <div></div> <div></div> <span>{{title}}</span> </div> </transition></template>注意：不要忘记 5. loading加载动画<template> <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" > <div class="loading" v-if="show"> <div></div> <div></div> <div></div> <div></div> <div></div> <span>{{title}}</span> </div> </transition></template><script>export default { name: 'Loading', props: { title: { type: String, default: '拼命加载中...' }, show: { type: Boolean, default: false } }}</script><style lang="less">@import "~assets/style/variable";.loading { height: 10px; width: 120px; margin: auto; text-align: center; font-size: 10px; padding: 10px 0; > div { display: inline-block; background-color: var(--theme-bg-color); height: 100%; width: 2px; margin-right: 4px; animation: Dance 1s infinite; &:nth-child(2) { animation-delay: -0.4s; } &:nth-child(3) { animation-delay: -0.6s; } &:nth-child(4) { animation-delay: -0.5s; } &:nth-child(5) { animation-delay: -0.2s; } }}@keyframes Dance { 0%, 40%, 100% { transform: scaleY(0.4); transform-origin: center 100%; } 20% { transform: scaleY(1.2); }}</style>6. 歌词滚动使用的是
import Lyric from 'lyric-parser'<script>export default { data () { return { currentLyric: null, // 歌词 currentLineNum: 0 // 词行 } }, methods: { // 获取歌词 getLyric () { api.getLyric().then(lyric => { ... this.currentLyric = new Lyric(lyric, this.handleLyric) ... }) }, // Lyric插件的回调 handleLyric ({ lineNum, txt }) { console.log('歌词', lineNum, txt) this.currentLineNum = lineNum if (lineNum > 5) { let lineEl = this.$refs.lyricLine[lineNum - 5] this.$refs.lyricList.scrollToElement(lineEl, 1000) // 滚动到元素 } else { this.$refs.lyricList.scrollTo(0, 0, 1000) // 滚动到顶部 } } }}</script> |
请发表评论