基于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文件![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828182449206.png#pic_center
基于vue移动端开发笔记_第1张图片
里面的内容如下

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,//是否直接更换属性值,而不添加备用属性
		}
	}
}

你可能感兴趣的:(Vue,vue,js,javascript)