【笔记】vue2.0音乐app——项目初始化以及推荐页面

项目初始化

首先利用 vue-cli i进行项目的创建，过程略

样式

获取数据

利用node进行获取数据

// 在vue.config.js中进行引用node文件
const registerRouter = require('./backend/router')

module.exports = {
	devServer: {
    	before (app) {
      		registerRouter(app)
    	}
  	}
}

为了方便之后对项目进行全局的css修改，因此利用vue.config进行全局引用

由于vue-cli本身就支持css等等的预处理器，因此可以在vue.config中进行全局引用
可参考:vue-cli------css

module.exports = {
	css: {
		loaderOptions: {
			scss: {
				// 全局引入变量
		        prependData: `
		        @import "@/assets/scss/mixin.scss";
		        @import "@/assets/scss/variable.scss";
        `
			}
		}
	}
}

为了方便之后进行一些全局的组件样式修改，因此创建公共的样式，并通过vue-cli全局引用
这样在使用时立即调用即可

// 颜色定义规范
$color-background: #222;
$color-background-d: rgba(0, 0, 0, 0.3);
$color-highlight-background: #333;
$color-dialog-background: #666;
$color-theme: #ffcd32;
$color-theme-d: rgba(255, 205, 49, 0.5);
$color-sub-theme: #d93f30;
$color-text: #fff;
$color-text-d: rgba(255, 255, 255, 0.3);
$color-text-l: rgba(255, 255, 255, 0.5);
$color-text-ll: rgba(255, 255, 255, 0.8);

// 字体定义规范
$font-size-small-s: 10px;
$font-size-small: 12px;
$font-size-medium: 14px;
$font-size-medium-x: 16px;
$font-size-large: 18px;
$font-size-large-x: 22px;

配置路由

// 由于页面存在公共的页面，因此船舰一个layout的一个公共布局
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: () => import('@/views/layout/index.vue'),
    redirect:'/recommend',
    children: [
      {
        path: '/recommend',
        name: 'recommend',
        component:()=>import('@/views/recommend/index.vue'),
      }
    ]
  },
 
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

创建公共区域

通过样式可以了解公共区域未顶部head与tab部分

tab区域

主要提醒一点，可以借助router-link激活时，会自动激活一个class类名‘router-link-active’，可以借助这一点实现动态样式的效果

推荐页面

轮播图效果

这里借助BetterScroll插件，用于处理滚动的效果
相关介绍可以根据官网查看：BetterScroll

// slide代码方法
<template>
  <div class="slider" ref="rootRef">
    <div class="slider-group">
      <div class="slider-page" v-for="item in sliders" :key="item.id">
        <a :href="item.link">
          <img :src="item.pic">
        </a>
      </div>
    </div>
    <div class="dots-wrapper">
      <span class="dot" v-for="(item,index) in sliders" :key="item.id" :class="{'active': currentPageIndex === index}"></span>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
import Slide from '@better-scroll/slide'

export default {
  name:'Slider',
  data() {
    return {
      sliderVal:null,
      currentPageIndex:0
    }
  },
  props:{
    sliders:{
      type:Array,
      default:()=>[]
    }
  },
  computed:{
  },
  // 在页面dom结构渲染完毕后进行初始化scroll-slider
  mounted() {
    this.sliderVal = null
    BScroll.use(Slide)
    this.sliderVal = new BScroll(this.$refs.rootRef, {
      click: true,
      scrollX: true,
      scrollY: false,
      momentum: false,
      bounce: false,
      probeType: 2,
      slide: true
    })
    this.sliderVal.on('slideWillChange', (page) => {
      this.currentPageIndex = page.pageX
    })
  },
  // 在销毁时将组件禁用
  destroyed() {
    this.sliderVal.disable()
  },

}
</script>

<style lang='scss' scoped>
.slider {
    // min-height: 1px;
    // font-size: 0;
    // touch-action: pan-y;
    .slider-group {
      position: relative;
      overflow: hidden;
      white-space: nowrap;
      .slider-page {
        display: inline-block;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        a {
          display: block;
          width: 100%;
        }
        img {
          display: block;
          width: 100%;
        }
      }
    }
    .dots-wrapper {
      position: absolute;
      left: 50%;
      bottom: 12px;
      line-height: 12px;
      transform: translateX(-50%);
      .dot {
        display: inline-block;
        margin: 0 4px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: $color-text-l;
        &.active {
          width: 20px;
          border-radius: 5px;
          background: $color-text-ll;
        }
      }
    }
  }

</style>

热门歌单推荐列表

热门表单则是使用简单的循环进行实现

<template>
  <div>
    <div class="recommend" v-loading = 'loading'>
      <!-- 轮播图 -->
      <div class="slider-wrapper">
        <div class="slider-content">
          <slider v-if="sliders.length" :sliders="sliders"></slider>
        </div>
      </div>

      <!-- 热门歌单推荐 -->
      <div class="title">热门歌单推荐</div>

      <!-- 推荐列表 -->
      <div class="recommend-list" >
        <ul>
          <li v-for="item in albums" :key="item.id" class="item" @click="selectItem(item)">
            <div class="icon">
              <img v-lazy='item.pic' width="60" height="60">
            </div>
            <div class="text">
              <p class="name">{{item.username}}</p>
              <p class="label">{{item.title}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {getRecommend} from '@/service/recommend.js'
import Slider from '@/component/scroll/scroll-slide.vue'
export default {
  components:{Slider},
  name:'Recommend',
  data() {
    return {
      sliders:[],
      albums:[],
      imgSize:Number,
    }
  },
  created() {
    this.getData()
  },
  computed:{
    loading(){
      return !this.sliders.length && !this.albums.length
    },
  },
  methods: {
    getData(){
      getRecommend().then(res=>{
        let data = res.data.result
        this.sliders = data.sliders
        this.albums = data.albums
      })
    },
    // 搜寻歌单
    selectItem(item){
      this.storageAlbum(item)
      this.$router.push({
        path:'/album',
        query:{
          id:item.id
        }
      })
    },
    // 使用good-storage进行缓存
    storageAlbum(item){
      this.$storage.set('ALBUM_KEY', item)
    }
  }

}
</script>

<style lang='scss' scoped>
.recommend {
  position: fixed;
  width: 100%;
  top: 88px;
  bottom: 0;
  overflow: scroll;
}

::v-deep .van-swipe__indicator--active {
  width: 12px;
  background-color: #ebedf0;
}


.slider-wrapper {
  position: relative;
  width: 100%;
  padding-top: 40%;
  overflow: hidden;
  .slider-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

.title {
  height: 65px;
  text-align: center;
  line-height: 65px;
  color: $color-theme;
  font-size: $font-size-medium;
}

.recommend-list {
  .item {
    display: flex;
    box-sizing: border-box;
    padding: 0px 20px 20px;
    .icon {
      width: 60px;
    }
    .text {
      display: flex;
      margin-left: 20px;
      flex-direction: column;
      justify-content: center;
      line-height: 20px;
      overflow: hidden;
      font-size: $font-size-medium;
    }
    .name {
      color: $color-text;
      margin-bottom: 10px;
    }
    .label {
      color: $color-text-l;
      margin-bottom: 10px;
    }
  }
}

</style>