在使用mint-ui播放轮播图效果的时候,用vw来设置高度单位,这样就能自适应窗体的大小了
.mint-swipe {
height: 40vw;
}
当我们的项目的代码量很多的时候,我们可以分为基础组件,还有逻辑组件,api接口,公共组建等一些列的目录,方便我们以后的维护
导入样式和js的代码:
@import "~common/stylus/variable" //样式
import {getRecommend,getDiscList} from 'api/recommend' //导入js代码
当我们组件里面使用了setTimeout的时候我们在最后面要进行清理:使用destroyed钩子函数来进行清理:养成好的编程习惯,有利于内存释放:
destroyed() {
clearTimeout(this.timer)
}
vue.config.js里面配置别名,说过很多次了,一定要注意啊
const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
module.exports = {
//配置别名就是到时候要访问这个目录下的东西直接写common 上面的1-3行代码 要记得写
chainWebpack: (config) => {
// 添加别名
config.resolve.alias
.set('common', resolve('src/common'))
.set('api', resolve('src/api'))
.set('base', resolve('src/base'))
.set('components', resolve('src/components'))
}
}
歌单组件数据的抓取有另外一个博客写着
关于懒加载技术的实现: vue-lazyload
1.首先先进行安装: "vue-lazyload": "^1.2.6",
2.然后在main.js里面进行全局的引入,代码如下
//导入懒加载
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload,{//第三方插件都要去使用
//这张图片就是懒加载时候的图片
loading: require('common/images/default.png')
})
3.最后在相应要懒加载的地方 把相应的src改成v-lazy="item.imgurl"
<img v-lazy="item.imgurl" width="60" height="60">
关于better-scroll的封装使用:
1.先把外层的盒子定死 在设置里面的盒子撑开外面的盒子
.recommend
position: fixed
width: 100%
top: 88px
bottom: 0
.recommend-content
height: 100%
overflow: hidden
2.封装better-scroll方法
<template>
<div ref="wrapper">
<div>
<slot></slot>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
props: {
probeType: {
type: Number,
default: 1
},
click: {
type: Boolean,
default: true
},
listenScroll: {
type: Boolean,
default: false
},
data: {
type: Array,
default: null
},
pullup: {
type: Boolean,
default: false
},
beforeScroll: {
type: Boolean,
default: false
},
refreshDelay: {
type: Number,
default: 20
}
},
mounted() {
setTimeout(() => {
this._initScroll()
}, 20)
},
methods: {
_initScroll() {
if (!this.$refs.wrapper) {
return
}
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click
})
//到这里scroll的初始化就截止了
//下面是配置一些代理
if (this.listenScroll) {
let me = this
this.scroll.on('scroll', (pos) => {
me.$emit('scroll', pos)
})
}
if (this.pullup) {
this.scroll.on('scrollEnd', () => {
if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
this.$emit('scrollToEnd')
}
})
}
if (this.beforeScroll) {
this.scroll.on('beforeScrollStart', () => {
this.$emit('beforeScroll')
})
}
},
//配置一些代理
disable() {
this.scroll && this.scroll.disable()
},
enable() {
//如果scroll是有的 就去调用enable
this.scroll && this.scroll.enable()
},
//自动刷新scroll列表 重新计算列表的高度
refresh() {
this.scroll && this.scroll.refresh()
},
scrollTo() {
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
},
scrollToElement() {
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
}
},
watch: {
data() {
setTimeout(() => {
this.refresh()
}, this.refreshDelay)
}
}
}
</script>
<style scoped lang="stylus">
</style>
<!--封装better-scroll-->
3.最后用scroll来包裹就好了
<scroll class="recommend-content" :data="SongList">
<!--这个是封装好的better-scroll
使用:data="SongList"来进行监听是否改变 调用refersh刷新列表页面-->
<slider :recommends="recommends"></slider>
<div class="recommend-list">
<h1 class="list-title">热门歌单推荐</h1>
<ul>
<li v-for="item of SongList" class="item" :key="item.id">
<div class="icon">
<img v-lazy="item.imgurl" width="60" height="60">
</div>
<div class="text">
<h2 class="name" >{{item.creator.name}}</h2>
<p class="desc">{{item.dissname}}</p>
</div>
</li>
</ul>
</div>
<div class="loading-container" v-show="!SongList.length">
<loading></loading>
</div> <!--数据没有的时候进行显示 没有的时候进行隐藏-->
</scroll>
注意在需要fastclick不能制止的默认行为 可以这样书写 class="needsclick"
关于加载等待的效果显示:loading
1.首先先定义这个组件
<template>
<div class="loading">
<img width="24" height="24" src="./loading.gif">
<p class="desc">{{title}}</p>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: '正在载入请稍等...'
}
}
}
</script>
<style scoped lang="stylus">
@import "../../common/stylus/variable"
.loading
width: 100%
text-align: center
.desc
line-height: 20px
font-size: $font-size-small
color: $color-text-l
</style>
2.然后在相应的组件注册即可
<div class="loading-container" v-show="!SongList.length">
<loading></loading>
</div>
.loading-container
position: absolute
width: 100%