vue better-scroll插件

迈不过友情╰ 2022-02-01 00:43 143阅读 0赞

github上面搜索  better-scroll

安装better-scroll ： npm i better-scroll --save

使用条件：

**1、html结构**

<div class="wrapper">
      <ul class="content">
        <li>...</li>
        <li>...</li>
        ...
      </ul>
      
    </div>

解释：必须外层套一个div.里面也必须是一个块级结构div或者ul等

2、**具体使用**

import BScroll from 'better-scroll'
    const wrapper = document.querySelector('.wrapper')
    const scroll = new BScroll(wrapper)//方法一
    
    
    
    import BScroll from 'better-scroll'
    const scroll = new BScroll('.wrapper')//方法二

**在去哪儿项目中具体使用：**

**html结构操作，**ref="wrapper"获取dom

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxMjA3NA_size_16_color_FFFFFF_t_70][]

引入

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxMjA3NA_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxMjA3NA_size_16_color_FFFFFF_t_70]: /images/20220201/2fd73d2f0dc9423c83857236788cd9be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxMjA3NA_size_16_color_FFFFFF_t_70 1]: /images/20220201/c5038f98e3684a4db97704eee17df0eb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，143人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue--插件--Vue SSR

其他网址 > [基于vue现有项目的服务器端渲染SSR改造 - 小火柴的蓝色理想 - 博客园][vue_SSR_ - _ -] > [Vue.js 服务器端渲染指南

电玩女神/ 2022年12月29日 14:01/ 0 赞/ 182 阅读

相关 Vue--插件--Vuex

原文网址：[Vue--插件--Vuex\_IT利刃出鞘的博客-CSDN博客][Vue--_--Vuex_IT_-CSDN] 其他网址 > [VueJS中学习使用Vuex

ゝ一纸荒年。/ 2022年12月28日 12:33/ 0 赞/ 210 阅读

相关实用网址、vue插件、vscode插件

实用网址：蚂蚁资源网：https://www.m1zy.com/ vue手册：https://www.w3cschool.cn/aekdgs/25h8gdn

悠悠/ 2022年12月28日 09:15/ 0 赞/ 212 阅读

相关 Vue--插件--Vue Router

原文网址：[Vue--插件--Vue Router\_IT利刃出鞘的博客-CSDN博客][Vue--_--Vue Router_IT_-CSDN] 其他网址 > [Vu

缺乏、安全感/ 2022年12月28日 01:41/ 0 赞/ 211 阅读

相关 vue插件总结

UI组件 [element][] - 饿了么出品的Vue2的web UI工具套件 [Vux][] - 基于Vue和WeUI的组件库 [mint

女爷i/ 2022年12月11日 04:25/ 0 赞/ 167 阅读

相关移动端滚动插件 BetterScroll

BetterScroll 详细介绍 [BetterScroll][] 是一款重点解决移动端各种滚动场景需求的开源插件，适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用

落日映苍穹つ/ 2022年05月18日 09:41/ 0 赞/ 322 阅读

相关 Vue Loading插件

![图片描述][bVbnxRY_w_115_h_114] > 基于vue全家桶目录结构 ├── components │ ├── Loading

旧城等待，/ 2022年01月31日 09:41/ 0 赞/ 414 阅读

相关 VUE插件汇总

一、UI组件及框架 1. [element][] \- 饿了么出品的web UI 2. [mint-ui][] \- Vue 的移动UI元素 3. [iview][]

喜欢ヅ旅行/ 2022年01月05日 10:07/ 0 赞/ 413 阅读

相关 vue使用betterscroll解决滚动

本来的不加定位，不设置超出隐藏的时候，显示的是右侧滚动条，但是手机端的话，最好还是不用滚动条，所以用这个第三方来处理 1.执行命令安装:npm install bett

素颜马尾好姑娘i/ 2021年12月21日 07:49/ 0 赞/ 404 阅读

相关 vue各种插件

[https://github.com/opendigg/awesome-github-vue][https_github.com_opendigg_awesome-githu

本是古典何须时尚/ 2021年09月20日 11:08/ 0 赞/ 620 阅读