BScroll 使用(Vue)

最新推荐文章于 2024-05-22 13:52:22 发布
最新推荐文章于 2024-05-22 13:52:22 发布
阅读量1.1w 收藏 8
点赞数 1
分类专栏： javascript 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43069018/article/details/88528469
版权
  • 下载
    • npm install better-scroll --save
  • 引包
    • import BScroll from ‘better-scroll’
  • 使用

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

重点：
  • 固定最外层容器高度
  • 外层容器的第一个子元素高度 要超过外层容器高度
  • 官方文档
Geronimo邈
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
插件//better-scroll（BScroll/滚动插件）使用方法及其在 vue 中使用
weixin_37877794的博客
02-26 1444
BScroll BScroll是什么 better-scroll，受iscroll启发，它支持更多功能并具有更好的滚动性能 github上的插件原地址 BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。 滚动原理 con
vue-app:基于Vue 开发的webapp用的框架主要vue mint BScroll其他组件全部手撸
04-29
一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view ...
滚动条插件better-scroll(BScroll)的使用
weixin_43799793的博客
12-14 5620
移动端中滚动条插件better-scroll(BScroll)的使用 定义： better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 better-scroll 是基于原生 JS 实现的，不依赖任何框...
前端开发攻略---用Vue实现无限滚动的几种方法
最新发布
nibabaoo的博客
05-22 2124
用vue实现无限滚动
BScroll的基本使用
Paranoid_truggle的博客
11-27 1162
/ 等数据请求完成后，并完成新的数据展示出来后。console.log(‘上拉加载更多’);// 发送网络请求，请求更多的数据。
Better-Scroll在Vue中的使用
iaz999的博客
05-19 231
父容器wrapper固定高度，子元素content高度大于父容器才能滚动。
Vue中的better-scroll
qq_45954420的博客
03-07 2205
什么是 better-scroll better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 安装 npm install better-scroll -S # 安装带有所有插件的 BetterScroll npm install @better-scroll/core # 核心滚动，大部分情况可能只需要一个简单的滚动
vue使用better-scroll实现菜单列表左右联动
07-13
在现代前端开发中，Vue.js 是一款非常流行的轻量级框架，它提供了高效的数据绑定和组件化能力，使得开发者能够构建复杂且响应式的用户界面。而 Better-Scroll 是一个强大的滚动插件，它能帮助开发者在移动设备或者...
vue滚动插件better-scroll使用详解
10-16
在本文中，我们将深入探讨如何在Vue项目中使用Better Scroll，并通过具体的代码示例来展示其基本用法和一个子组件的横向滚动实现。 首先，要使用Better Scroll，你需要通过npm将其安装到你的项目中： ``` npm ...
vue better-scroll插件使用详解
08-28
vue better-scroll插件使用详解 本篇文章主要介绍了vue better-scroll插件的使用详解，better-scroll是一个移动端滚动的解决方案，它基于iscroll的重写，具有强大的功能，可以实现普通的滚动列表、轮播图、picker...
vue仿美团简单案例
05-10
首先，`import BScroll from 'better-scroll'`这行代码引入了Better Scroll库。Better Scroll是一个强大的滚动插件，它为网页提供了平滑、流畅的滚动效果，特别是在移动设备上。在仿美团案例中，它主要用于处理菜单...
移动端-vue-BScroll用法教程
ll_883963的博客
01-05 670
BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件，是最接近与原生的滚动插件，兼容pc和移动端。
Vue 之 better-scroll 详解
热门推荐
wzg0817的博客
08-14 2万+
观看更佳：传送门 better-scroll 是什么 better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。 起步 学习使用.
vue 编写H5项目使用BScroll “better-scroll“；两边都滚动，并且联系
qq_61570843的博客
08-11 878
4.先挂载实现滚动效果，外层盒子要设置溢出隐藏。2.组件中引入better-scroll。1.先下载better-scroll。5.实现右边滚动联系左边。6.左边点击使其左边滚动。3.先展示html代码。7.完成附上完整代码。
vue中使用better-scroll插件
Hannah_Hannah_的博客
05-20 1560
一、better-scroll使用场景和优势 better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 二、在vue中使用better-scroll插件 （1）先下载 npm i beter-scroll （2）再进行导入注册使用（在vue中一般建议封装一个better-scroll，因为一般会有很多滚动
H5首字母检索城市
菜鸟老五
09-27 2558
//HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content=&quo
bscroll 滚动位置_BScroll左右联动导航
weixin_31261145的博客
01-15 776
[TOC]#### BScroll 制作左右联动导航1. 图例![](https://box.kancloud.cn/94e9f1275e82a1337d1d8a261b9b48a3_373x506.png)2. 需求：* [ ] 点击左侧菜单 右侧滚动到对应位置* [ ] 滚动右侧菜单 左侧跟随联动3. 实现步骤* [ ] 监听右侧商品列表滚动Y坐标 scrollY = 0* [ ] 求出右边商...
layer打开弹窗时传递参数
Ark方舟
07-14 1860
js var userGrade=Mrant layer.open({ title: '弹出页面', area: ['800px', '500px'], shade: [0.3, '#393D49'], content: "test.html?grade="+userGrade, yes: function(index) { } }); 弹出层获取 传过来的参数 function RequestParameter(){ var url = window.location.s...
使用better-scroll插件无法滚动原因
风的轻扬
01-17 1114
一、DOM层级关系 <div class="wrapper"> <div class="content"> content... </div> </div> wrapper里面不能存在多个同级div，如果你这样写： <div class="classifyTitle" ref=
vue使用 Scroller组件
05-31
Vue 中可以使用第三方库 Better-Scroll 实现滚动效果，而 Scroller 组件是 Better-Scroll 库的一个封装，可以更方便地在 Vue 中使用 Better-Scroll。 下面是一个简单的 Scroller 组件的示例： ```vue <template> <div class="wrapper" ref="wrapper"> <div class="content"> <!-- 这里是滚动内容 --> </div> </div> </template> <script> import BScroll from 'better-scroll'; export default { mounted() { this.initScroll(); }, methods: { initScroll() { this.scroll = new BScroll(this.$refs.wrapper, { // 这里可以设置 Better-Scroll 的配置项 }); } }, beforeDestroy() { this.scroll.destroy(); } }; </script> <style> .wrapper { height: 200px; overflow: hidden; } .content { /* 这里是内容的样式 */ } </style> ``` 在上面的代码中，我们首先创建了一个 Scroller 组件，它包含了一个滚动内容的区域和一个包裹滚动内容的容器。在 mounted 钩子函数中，我们调用了 initScroll 方法来初始化 Better-Scroll 实例，并且将容器元素作为第一个参数传入。在 initScroll 方法中，我们可以设置 Better-Scroll 的配置项，比如滚动方向、滚动条样式、滚动事件等等。在 beforeDestroy 钩子函数中，我们销毁了 Better-Scroll 实例，以防止内存泄漏。 需要注意的是，Scroller 组件的容器元素必须要有一个固定的高度，并且设置 overflow 属性为 hidden，才能正常显示滚动效果。另外，在使用 Better-Scroll 时需要注意一些性能问题，比如避免频繁的调用 scroll 方法、避免在滚动时频繁修改 DOM 等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值