Vue（四）

二十八、レムのレビュー

フォントサイズの計算

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

29、より良いスクロール

公式ウェブサイト：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)
})

30、コンポーネントライブラリ

1. elementUIコンポーネントライブラリ

公式ウェブサイト

要素UIのインストール

npm i element-ui -S

要素UIのインポート

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);