51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
信创认证
公众号矩阵
移动端
视频课
免费课
排行榜
短视频
直播课
软考学堂
全部课程
软考
信创认证
华为认证
厂商认证
IT技术
PMP项目管理
免费题库
在线学习
文章
资源
问答
课堂
专栏
直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
51CTO博客
首页
关注
排行榜
精品课程
免费资料
软考题库
科目全、试题精、讲解专业，扫码免费刷
搜索历史
清空
热门搜索
查看【
】的结果
写文章
创作中心
登录
注册
better scroll用法vue
51CTO博客
>
热门标签
>
better scroll用法vue
全部内容
精选文章
免费资料
代码库
标签简介
时间
热度
默认
CKA（Kubernetes 管理员认证）精品班
按照企业k8s需求进行技能培训，帮助用户快速拿下CKA认证，K8S采用新版本进行授课，课程内容全、讲解详细 。
免费试学
软考高级：系统架构设计师精品班
根据考试大纲对知识点、高频考点进行深入讲解，传授答题技巧及判断标准，助力高效备考。
免费试学
信创认证：系统架构师精品班（高级）
信息技术应用创新人才考试评价
免费试学
better
-
scroll
背景： 在移动端触发事件一般不用click 因为有延迟，一般用的是 touchstart （但是有问题，点击滑动都会触发） 所以用tap(只点击生效，滑动不生效) ，但是原生不支持 所以要用第三方的库来实现比如：zepto、
vue
-touch 、
better
-
scroll
（在iscroll之上再做了 ...
实例化
数据加载
ios
下载安装
移动端
转载
mob604756fbb3bd
2021-04-11 01:04:00
333
阅读
2
评论
better
-
scroll
<template> <div class="wrapper" ref="wrapper"> <div class="content"> <ul> <li v-for="i in data" :key="i" @click="abc"> {{i}} </li> </ul> <!--上拉加载--> < ...
上拉加载
下拉刷新
click事件
转载
mb5ffd6fed5661e
2021-10-20 14:12:00
137
阅读
2
评论
better
-
scroll
在
vue
中的应用
在我们日常的移动端项目开发中处理滚动列表是再常见不过的需求了以滴滴为例可以是这样竖向滚动的列表如图所示微信 —> 钱包—>滴滴出行”体验效果。什么是
better
-
scroll
better
-
scroll
是一个移动端滚动的解决方案它是基于 iscroll 的重写它和 iscroll 的主要区别在 这里 。
better
-
scroll
也很强大不仅可以做普通的滚动列表
浏览器
解决方案
项目开发
原创
zddnd
2017-06-20 10:57:28
1221
阅读
vue
3 使用
better
-
scroll
滚动
在GitHub里搜索这个名称 然后点进去，获取下载方式，通过
vue
终端进行下标 下载完成在需要的
Vue
组件页面里引入 在视图HTML上我们要滚动的结构要使用两层div包裹，并给出相应的class 其次在js里即逻辑层 一般在
vue
3里我们所有的代码都是写在setup里的所以我们需要在这个页面加载完成 ...
入事件
html
当前页
搜索
页面加载
转载
mob604756eff415
2021-07-16 16:02:00
2793
阅读
2
评论
Vue
项目中使用
better
-
scroll
当
better
-
scroll
遇见
Vue
在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了。 以滴滴为例，可以是这样竖向滚动的列表，如图所示：也可以是横向滚动的导航栏，如图所示：可以打开“微信 —> 钱包—>滴滴出行”体验效果。我们在实现这类滚动功能的时候，会用到我写的第三方库，
better
-
scroll
。什么是
better
-scrollbetter-
scroll
是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscrol..
初始化
数据
滚动效果
下拉刷新
vue.js
转载
wx61133eeec1457
2021-08-12 14:53:01
630
阅读
vue
项目
better
-
scroll
使用注意点
1.应该在何时创建BScroll对象 1）created : 中请求数据，ajax是异步的，这个时候可能mounted已经执行完了，也就是dom挂载完了，但数据还没请求回来，无法获取到内部元素（数据渲染出来的dom）高度. 无法渲染内部元素，无法滚动2）updated:数据发生改变时执行；数据改变，
数据
数据加载
ajax
请求数据
转载
mb5ff59200ebb3c
2020-12-08 14:54:00
195
阅读
2
评论
better
-
scroll
react
git https://gitee.com/mirrors/
better
-
scroll
/ 1.x 文档 https://
better
-
scroll
.github.io/docs-v1/doc/zh-hans/ 2.x文档 https://
better
-
scroll
.github.io/docs/zh ...
git
github
html
ide
转载
mob604756fe00bf
2021-08-05 13:24:00
171
阅读
2
评论
better
-
scroll
快速上手及封装（
vue
项目）
BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的iscroll的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 BetterScroll 是使用纯 JavaScr... ...
默认值
性能优化
移动端
配置项
上拉加载
转载
mb5fdb13b347132
2021-10-25 16:11:00
316
阅读
2
评论
六、
Vue
中使用滚动插件：
better
-
scroll
1.安装插件cnpm install
better
-
scroll
--save2.使用（1）是元素符合规范 要想使用
better
-
scroll
这个插件，必须保证元素符合下列规则：<div class="wrapper"> <ul class="content"> <li>...</li> <li>.....
实例化
安装插件
原创
mb62b19580f1ddc
2022-06-21 20:01:01
92
阅读
vue
中的
better
-
scroll
横向滚动案例
1.安装
better
-
scroll
托管在 Npm 上，执行如下命令安装： npm install
better
-
scroll
--save; 2.引入 import BScroll from '
better
-
scroll
' 如果是ES5语法 var BScroll = require('
better
-
scroll
') <template> <div class="
Vue.js
vue
原创
江一铭的博客
2021-07-12 11:04:28
977
阅读
vue
中的
better
-
scroll
横向滚动案例
1.安装
better
-
scroll
托管在 Npm 上，执行如下命令安装：npm install
better
-
scroll
--save;2.引入import BScroll from '
better
-
scroll
'如果是ES5语法var BScroll = require('
better
-
scroll
')<template> <div class="box">
vue
i++
公众号
点击事件
原创
江一铭的博客
2022-02-26 17:35:21
687
阅读
better
-
scroll
的使用
1.安装 2.引入 3.初始化 获取这个 DOM 对象 这行代码就是来获取dom 的 链接：https://
better
-
scroll
.github.io/docs/zh-CN/plugins/#%E4%BD%BF%E7%94%A8%E6%8F%92%E4%BB%B6%E7%9A%84%E6%96%
数据
生命周期
初始化
github
mysql
转载
mb5ff591cb6ec96
2019-06-30 11:05:00
130
阅读
2
评论
vue
项目笔记（16）-
vue
滚动插件
better
-
scroll
的使用
vue
滚动插件
better
-
scroll
的使用在移动端或APP中，我们经常遇到页面中的部分元素需要滚动的情况，这个时候我们就可能需要使用
vue
插件
better
-
scroll
，该插件的使用步骤如下：1、安装
better
-scrollnpm install
better
-
scroll
--save2、打开网址：https://github.com/ustbhuangyi/
better
...
better-scroll
github
js代码
html
其他
原创
CHH5431
2022-02-21 16:23:20
560
阅读
vue
项目笔记（16）-
vue
滚动插件
better
-
scroll
的使用
vue
滚动插件
better
-
scroll
的使用在移动端或APP中，我们经常遇到页面中的部分元素需要滚动的情况，这个时候我们就可能需要使用
vue
插件
better
-
scroll
，该插件的使用步骤如下：1、安装
better
-scrollnpm install
better
-
scroll
--save2、打开网址：https://github.com/ustbhuangyi/
better
...
better-scroll
移动端
html
js代码
github
原创
CHH5431
2021-08-27 12:52:27
485
阅读
better
-
scroll
踩坑总结
1、下载安装1 npm install
better
-
scroll
--save 2、在项目中使用该插件的页面引入1 import Bscroll from '
better
-
scroll
'3、实例化
scroll
1 this.$nextTick(() => {2 this.
scroll
= new Bscroll(this.$refs.wrapper,{3
better-scroll
转载
mob604756f4c9c3
2021-05-22 17:31:07
330
阅读
2
评论
better
-
scroll
实现无缝轮播
better
-
scroll
适用于解决移动端各种滚动场景，滚动列表、轮播图等。
better
-
scroll
新版本设置轮播图有一些变动。slider.
vue
：结构及部分样式设置： <div class="slider" ref="slider"> <div class="slider-group" ref="sliderGroup">
轮播
vue
ide
数组
新版本
原创
wx5b513ff79311e
2021-11-30 16:08:11
883
阅读
移动端滚动方案：
better
-
scroll
BetterScroll 是什么 BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll (opens new window) 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature ...
html
javascript
数据
性能优化
jquery
转载
mob604756fd2a33
2021-07-12 16:50:00
495
阅读
2
评论
better
-
scroll
的参数和方法
格式：let obj = new BScroll(object,{[option1,],.,.}); 注意，如果在某一个组件内创建了一个BScroll的实例，在组件生命周期结束前要注意调用destroy方法，否则在滑动过程中切换页面会导致一直触发
scroll
事件，导致一些意想不到的问题，切记！！！
缓动
回弹
css3
原创
苍青浪1
2022-07-07 21:48:50
294
阅读
better
-
scroll
怎样new多个实例?
var
scroll
= new BScroll(document.getElementById("wrapper"), {};页面不确定有几个左右滑动的效果，怎样new多个实例？共用一个实例
scroll
better
原创
qq590c4321679c6
2017-10-18 19:15:35
1496
阅读
vue
项目开发中
better
-
scroll
在移动端开发案例
本文章仅仅是对日常项目开发移动端常见的2个场景(横屏与竖屏)使用,更多知识点请参考官网文档一、手机端全屏滚动1、效果图2、具体代码自己看了<template> <!--定义外层--> <div class="wrapper" ref="wrapper"> <!--定义需要滚动的内容区域--> <ul class="content">
Vue教程
Vue学习
原创
水痕01
2021-06-15 16:04:48
518
阅读
首页
1
2
3
4
5
共100条记录
精品课程
免费资料>
2025软考
系统架构设计师
系统规划与管理师
软件设计师
系统集成项目管理工程师
信创认证
系统架构师
信创集成项目管理师
信创规划管理师
系统开发工程师
厂商认证
CKA/CKS架构师
红帽认证工程师
Oracle-OCP认证
Oracle-OCM认证
IT技术
数据库高级工程师
AIGC大模型实战
Linux云计算架构师
Python全栈开发
华为认证
数通HCIP认证
云计算HCIE认证
华为存储HCIE认证
HCIP安全认证
相关文章
Vue3 + TypeScript + Better-Scroll 极简上拉下拉组件
Vue3 + TypeScript + Better-Scroll 万能上拉下拉组件
python的scroll用法 python es scroll
better-scroll不能滚动之 滚动监听-左右联动
vue2项目中better-scroll 插件使用时候页面不滚动
vue-happy-scroll：vue中借助vue happy scroll实现局部文字滚动
vue seamless scroll官网 vue stroe
VUE vue-seamless-scroll 无缝滚动
vue中的scroll滚动
相关搜索
全部
better scroll github
better scroll vue
better scroll用法vue
better-scroll vue
vue better scroll
vue better-scroll
vue+better+scroll销毁
vue.js better scroll
vue2 better scroll
vue项目better-scroll
Copyright © 2005-2025
51CTO.COM
版权所有 京ICP证060544号
关于我们
官方博客
全部文章
热门标签
班级博客
了解我们
网站地图
意见反馈
友情链接
鸿蒙开发者社区
51CTO学堂
51CTO
软考资讯
