二十八、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);