Vuejs基础版VIII

简介: Vuejs基础版VIII

@[TOC]
官网:https://ustbhuangyi.github.io/better-scroll/

一、安装相应模块组件

npm install better-scroll@1.13.2 --save

二、原生实现:设置滚动区域

在这里插入图片描述
注:overflow-y:scroll属性用于表示超出该块后自动隐藏
弊端:在移动端会非常卡顿,划一下卡一下

二、实现

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、新建project实现

1.bascroll.js文件

npm install better-scroll@1.13.2 --savenodel_modules/dist文件下找到bascroll.js文件,或者在官网找到bascroll.js文件
在这里插入图片描述

2. 思想

在这里插入图片描述

3. 新建自己的项目并导入 bscroll.js

在这里插入图片描述

4. 实时监测滚动的位置

效果如下:
在这里插入图片描述
实现如下:
在这里插入图片描述

5. 属性click

在这里插入图片描述
在这里插入图片描述

6. 各种事件的查看与使用

在这里插入图片描述

7. 属性 pullUpLoad

在这里插入图片描述
在这里插入图片描述

相关文章
|
6月前
|
存储 JavaScript 前端开发
Vuejs基础版VII
Vuejs基础版VII
|
6月前
|
存储 缓存 JavaScript
Vuejs补充版
Vuejs补充版
151 0
|
前端开发 数据格式
【React工作记录一百零一】再次接触老朋友react+ant design table合并单元格(1)
#yyds干货盘点 再次接触老朋友react+ant design table合并单元格
110 0
|
前端开发
【React工作记录六十二】ant design锚点组件
【React工作记录六十二】ant design锚点组件
405 0
|
前端开发
#yyds干货盘点 【React工作记录三十四】ant design中Popconfirm的使用
#yyds干货盘点 【React工作记录三十四】ant design中Popconfirm的使用
61 0
|
前端开发
#yyds干货盘点 【React工作记录三十四】ant design中Popconfirm的使用
#yyds干货盘点 【React工作记录三十四】ant design中Popconfirm的使用
78 0
|
存储 前端开发
#yyds干货盘点 【React工作记录二十九】react中使用的富文本编辑器braft-editor使用
#yyds干货盘点 【React工作记录二十九】react中使用的富文本编辑器braft-editor使用
147 0
#yyds干货盘点 【React工作记录二十九】react中使用的富文本编辑器braft-editor使用
|
前端开发 数据格式
#yyds干货盘点 【React工作记录二十二】ant design实现嵌套table
#yyds干货盘点 【React工作记录二十二】ant design实现嵌套table
224 0
#yyds干货盘点 【React工作记录二十二】ant design实现嵌套table
|
前端开发
#yyds干货盘点 【React工作记录三十一】dva.js初识
#yyds干货盘点 【React工作记录三十一】dva.js初识
100 0
#yyds干货盘点 【React工作记录三十一】dva.js初识
|
前端开发
#yyds干货盘点 【React工作记录二十八】重置ant design得样式
#yyds干货盘点 【React工作记录二十八】重置ant design得样式
93 0
#yyds干货盘点 【React工作记录二十八】重置ant design得样式