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

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

相关文章
|
前端开发
【React工作记录一百零一】再次接触老朋友react+ant design table合并单元格(2)
#yyds干货盘点 再次接触老朋友react+ant design table合并单元格
96 0
|
6月前
|
存储 JavaScript 前端开发
Vuejs基础版VII
Vuejs基础版VII
|
6月前
|
存储 缓存 JavaScript
Vuejs补充版
Vuejs补充版
149 0
|
前端开发 索引
【React工作记录七十九】React+hook+ts+ant design封装一个具有动态表格得页面
【React工作记录七十九】React+hook+ts+ant design封装一个具有动态表格得页面
150 0
|
前端开发 数据格式
【React工作记录一百零一】再次接触老朋友react+ant design table合并单元格(1)
#yyds干货盘点 再次接触老朋友react+ant design table合并单元格
108 0
|
前端开发
【React工作记录六十二】ant design锚点组件
【React工作记录六十二】ant design锚点组件
400 0
|
前端开发 数据格式
#yyds干货盘点 【React工作记录一百零一】再次接触老朋友react+ant design table合并单元格 (1)
#yyds干货盘点 【React工作记录一百零一】再次接触老朋友react+ant design table合并单元格
92 0
|
前端开发
#yyds干货盘点 【React工作记录一百零一】再次接触老朋友react+ant design table合并单元格 (2)
#yyds干货盘点 【React工作记录一百零一】再次接触老朋友react+ant design table合并单元格
82 0
|
前端开发
【React工作记录三十四】ant design中Popconfirm的使用
【React工作记录三十四】ant design中Popconfirm的使用
230 0
|
前端开发
#yyds干货盘点 【React工作记录三十四】ant design中Popconfirm的使用
#yyds干货盘点 【React工作记录三十四】ant design中Popconfirm的使用
61 0