基于vue移动端开发笔记
基于vue移动端开发笔记
1.滚动到某个地方固定到顶端
用position: sticky;
position: sticky;
top: 44px;//固定的位置
注意：兼容性不好，如果是移动端的话可以使用，pc端看情况
2.滚动使用的插件 better-scroll
如果在移动端使用原生的滚动会非常卡顿，并不流畅
(1)安装
npm install better-scroll -S
(2)在普通的js文件中的使用
better-scroll使用的时候最外层的元素只能包裹一个元素
//默认情况下BScroll是不可以实时的监听滚动的位置
//probeType侦测
//0,1都是不侦测实时的位置
//2：在手指滚动的过程中侦测,手指离开后的惯性滚动过程中不侦测
//3.只要是滚动,就侦测
const bscroll = new BScroll(document.querySelector('.content'),{
probeType:3,//监测实时位置
click:true,//点击事件监听
pullUpLoad:true,//实现上拉加载
})
//获取实时位置
bscroll.on('scroll',(position)=>{
console.log(position)
})
bsroll.on(''pullingUp,()=>{
console.log('上拉加载更多')
//发送网络请求，请求更多页的数据
//等数据请求完成,并且将新的数据展示出来后
bsroll.finishPullUp()
})
(3)在vue中使用
<script>
import BScroll from 'better-scroll'
export default{
data(){
return{
scroll:null
}
},
mounted() {
this.scroll=new BScroll(document.querySelector(".category"),{
//probeType:0,1,2(手指滚动);3只要滚动
probeType:3,//监听滚动
pullUpLoad:true,//下拉加载
click:true,//切记这个是需要的，category内部元素点击事件生效如果没有这个点击事件不生效
})
//滚动获取位置
this.scroll.on('scroll',(position)=>{
console.log(position)
})
//上了加载更多
this.scroll.on('pullingUp',()=>{
console.log('上拉加载更多')
})
//刷新然后重新获取content的高度，bug的解决
this.scroll.refresh()
this.scroll.scrollTo(0,0,500)//返回顶部，第三个参数是时间
}
}
</script>
常见BUG:
Better-Scroll在决定有多少区域可以滚动时，是根据scrollHeight属性决定的
scrollHeight属性是根据放Better-Scroll的content的内容高度决定的，图片加载慢的时候，scrollHeight属性已经计算完毕，但是和真正的高度不符合所以下拉出现问题，当图片加载完毕之后有了新的高度，但是scrollHeight属性并没有进行更新
BUG解决
监听每一张图片是否记载完成，只要有一张图片加载完成就刷新Better-Scroll，也就是执行一次refresh()
如何监听图片是否加载完成了？
img.onload=function(){}
在vue中监听
<template>
<div class="goodItem">
<img :src="goodItem.show.img" :alt="goodItem.title" @load="imageLoad">
</div>
</template>
<script>
export default {
props: ["goodItem"],
methods:{
imageLoad(){
console.log('imageLoad')
}
}
}
</script>
(4)在vue中的封装
<template>
<div class="wrapper" ref="wrapper">
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default{
props:["probetype","pullupload"],
data(){
return{
scroll:null,
}
},
mounted() {
// 创建BScroll对象,不使用class是因为如果程序中多次调用这个组件，导致不知道你这里调用的是哪一个地方的
this.scroll=new BScroll(this.$refs.wrapper,{
click:true,//content中的内容是否允许点击
probeType:this.probetype,//
pullUpLoad:this.pullupload//下拉加载
})
// Scroll中的监听滚动事件
this.scroll.on('scroll',(position)=>{
this.$emit('scroll',position)
})
// 监听上拉事件
this.scroll.on('pullingUp',()=>{
this.$emit('pullingUp')
})
}
}
</script>
<style scoped>
</style>
3.ref的使用
<div class="wrapper" ref="wrapper"></div>
(1)ref如果是绑定在组件中的，通过this.$refs.refname获取到的是一个组件对象,可以直接访问组件内部的内容，因为this.$refs.refname得到的是组件对象
(2)ref如果是绑定在元素中，通过this.$refs.refname获取到的是一个该元素
(3)this.$refs.refname在create中使用可能会获取不到所以在mounted中获取
(4)获取this.$refs对应的元素通过$el获取
this.$refs.tabcontrol.$el.offsetTop
(5)通过for循环获取ref的值,
<template>
<div class="cart">
<CartShopInfo v-for="item in $store.state.buyCar.info" :key="item.iid" :item="item" @allNumber="allNumberC" @allMoney="allMoneyC" :ref="item.iid"></CartShopInfo>
</div>
</template>
<script>
export default{
methods:{
allCheck(){
this.$store.state.buyCar.iid.forEach((a)=>{
this.$refs[a][0].active=this.active;
})
},
},
}
</script>
4.监听组件的原生事件需要使用native属性
例如点击事件
@click.native=“backClick”
<BackTop @click.native="backClick"></BackTop>
5.事件总线(在此是为了解决2问题中使用的)
和$emit(),props类似都是用于传值
(1)在main.js文件中创建新的vue实例代码如下
Vue.prototype.$bus=new Vue()//$bus是自己起的名字
(2)在组件中的使用
组件一：
使用this.$bus.$emit("functionName")将事件添加到事件总线中
imageLoad(){
this.$bus.$emit('itemImageLoad')
}
组件二：
使用组件一添加到事件总线的方法
使用this.$bus.$on('functionName',Fun)
this.$bus.$on('itemImageLoad',()={
this.$refs.scroll.scroll.refresh()
})
6.axios的封装
(1)封装
import axios from 'axios'
// axios封装
export function ajax(config){
const instance = axios.create({
baseURL:'http://xxx.xxx.xxx.xxx:xxxx/xx/xx',
timeout:5000
});
// axios请求拦截
instance.interceptors.request.use(config=>{
return config
},err=>{
console.log(err)
})
// axios的响应拦截
instance.interceptors.response.use(res=>{
return res.data
},err=>{
console.log(err)
})
return instance(config)
}
(2)使用
import {ajax} from './ajax.js';
export function getHomeMultidata(){
return ajax({
url:'/home/multidata'
})
}
export function getHomeGoods(type,page){
return ajax({
url:'/home/data',
params:{
type:type,
page:page
}
})
}
7.防抖函数
export function debounce(func, delay) {
let timer = null;
return function(...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
func.apply(this, args)
}, delay)
}
}
8.组件切换需要保持原来的位置
在这里用keep-alive，当组件在keep-alive内被切换时组件的activated(活跃)、deactivated(不活跃)这两个生命周期钩子函数会被执行
<template>
<div id="app">
<keep-alive exclude="Detail">
<router-view></router-view>
</keep-alive></tabbar>
</div>
</template>
(1).include、exclude属性
<keep-alive include="home,cart">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="Detail">
<router-view></router-view>
</keep-alive>
(2)利用meta属性
export default[
{
path:'/',
name:'home',
components:Home,
meta:{
keepAlive:true //需要被缓存的组件
},
{
path:'/category',
name:'category',
components:Category,
meta:{
keepAlive:false //不需要被缓存的组件
}
]
<keep-alive>
<router-view v-if="this.$route.meta.keepAlive"></router-view>
<!--这里是会被缓存的组件-->
</keep-alive>
<keep-alive>
<router-view v-if="!this.$route.meta.keepAlive"></router-view>
</keep-alive>
<!--这里是不会被缓存的组件-->
9.watch的监听事件
在组件中监听store中的数据和组件中的数据
watch:{
// 监听store商店中的值
'$store.state.allMoney'(newRes,oldRes){
console.log(newRes);//store商店中的allMoney数据改变后的值
console.log(oldRes);//store商店中的allMoney数据改变前的值
},
// 监听组件中的值
"active"(newRes,oldRes){
console.log(newRes);
console.log(oldRes);
}
}
10.使用element ui组件的样式修改
当想修改样式的时候，不要在 scoped 中使用，这样是不起效果的，可以在style标签下边在添加一个style标签洗element中的样式
11.移动端300ms点击延迟
使用fastclick插件
(1)安装
npm install fastclick --save
(2)引入到main.js文件
import FastClick from 'fastclick'
(3)在main.js中使用
// 使用fastclick
FastClick.attach(document.body)
12.图片懒加载
(1)安装
npm install vue-lazyload --save
(2)导入
import VueLazyLoad from 'vue-lazyload'
(3)Vue.use(VueLazyLoad)
(4)修改img中的:src->v-lazy
如果想使用占位符
Vue.use(VueLazyLoad,{
loading:require('./assets/img/common/placeholder.png')
})
13.px2vw-css单位转化插件
(1)安装
npm install postcss-px-to-viewport --save-dev
(2)使用
vueCLI4的话在package.js同级的目录下创建一个postcss.config.js文件
里面的内容如下
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
unitToConvert: 'px',// 需要转换的单位，默认为"px"
viewportWidth: 375,//设计稿的视口宽度
unitPrecision: 5,//单位转换后保留的精度
propList: ['*'],
viewportUnit: 'vw',//希望使用的视口单位
fontViewportUnit: 'vw',//字体使用的视口单位
selectorBlackList: ['ignore'],//需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位
minPixelValue: 1,//设置最小的转换数值，如果为1的话，只有大于1的值会被转换
mediaQuery: false,//媒体查询里的单位是否需要转换单位
replace: true,//是否直接更换属性值，而不添加备用属性
}
}
}