Vue（四）

二十八、rem回顾

fontsize 计算

<script>
	//以iPhone6为设计稿
	document.documentElement.style.fontSize=document.documentElement.clientWidth/750*100+'px'
</script>

二十九、betterScroll

官网：https://better-scroll.github.io/docs/zh-CN/

主要完成的功能需要包含Better-Scroll实现页面中拖动滚动、拉
动属性等功能

1.初始化

//html
<div class="kerwin" >
	<ul >
		<li v‐for="item in datalist">{{item}}</li>
	</ul>
	<div class="loading‐wrapper"></div>
</div>

//js
import BScroll from 'better‐scroll'

//mounted生命周期直接调用，不需要异步结束
this.height = document.documentElement.clientHeight‐x+"px" //动态计算高度

this.$nextTick(()=>{
	//以上状态更新完后，再初始化better scroll
	var myscroll = new BScroll('.kerwin',
	{
		pullDownRefresh: {
			threshold: 50,
			stop: 20
		},
		scrollbar: {
			fade: true,
			interactive: false // 1.8.0 新增
		},
		pullUpLoad: {
			threshold: 50
		},
		click:true //事件生效
	})
})

//css
.kerwin{
	height: 300px; //设置高度
	overflow:hidden; //溢出隐藏
	position: relative; //修正滚动条位置
}

2.下拉刷新

myscroll.on('pullingDown',()=>{
	console.log("下拉了")
	setTimeout(() => {
	myscroll.finishPullDown() // 自动调用 .refresh()
	}, 1000)
})

3.上拉加载

myscroll.on('pullingUp',()=>{
console.log("到底了")
setTimeout(() => {
myscroll.finishPullUp() // 自动调用 .refresh()
}, 1000)
})

三十、组件库

1.elementUI组件库

官网

安装elementUI

npm i element-ui -S

导入elementUI

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

2.vant组件库

官网

安装

# Vue 3 项目，安装最新版 Vant
npm i vant

# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

引入

import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';

const app = createApp();

// 3. 注册你需要的组件
app.use(Button);

三十一、vuex

状态管理模式

export default new Vuex.Store({
	//state公共状态
	state:{
		
	},
	//支持异步和同步
	action:{

	},
	//统一管理。被devtools记录状态的修改
	//只能支持同步
	mutaition:{

	}
})

//vuex管理保存公共状态。（分散在各个组件内的状态，统一管理）
/*
	注意：
		vuex默认是管理在内存，一刷新页面，公共状态就丢失了。
		vuex持久化-todo
*/
/*
	vue项目应用
		1.非父子的通信
		2.后端数据的缓存快照，减少重复数据请求，减轻服务器压力，提高用户体验
*/

注意：

• 应用层级的状态应该集中到单个store对象中。
• 提交mutation是更改状态的唯一方法，并且这个过程是同步的。
• 异步逻辑都应该封装到action里面。

vuex新写法

import {mapState mapActions,mapMutations} from 'vuex'//export {mapState}
export default{
	computed:{
		...mapState(['状态名字'])
	},
	methods:{
		...mapActions(['方法名']),
		...mapMutations(['方法名'])
	}
}

vue持久化

github地址