vue中使用better-scroll实现滑动

亦凉 2021-09-19 00:18 261阅读 0赞

### 下载 better-scroll ###

npm install better-scroll --save

**注意：**

*  必须包含两个大的div，外层和内层div
 *  外层div设置可视的大小(宽或者高)-有限制宽或高
 *  内层div，包裹整个可以滚动的部分
 *  内层div高度一定大于外层div的宽或高，才能滚动
 *  **必须在获取数据和DOM渲染完之后再调用定义的 initScroll()方法，否则无法滚动**

##### 在组件script标签中引入 #####

<script>
    import BScroll from 'better-scroll'
    export default { 
      data() { 
    	return { 
    	  goods: []
    	}
      }
    }
    </script>

### 一、 垂直滚动 ###

##### 在组件模板template中布局 #####

<template>
      <div class="wrapper" ref="wrapper">
        <ul>
          <li v-for="item in goods" class="item">
            <span class="text">
              { { item.name}}
            </span>
          </li>
        </ul>
      </div>
    </template>

##### 在组件钩子函数methods中定义方法 #####

<script>
    export default { 
      data() { 
    	return { 
    	  goods: [],
    	  Scroll: null
    	}
      },
      methods: { 
      	initScroll() { 
          this.$nextTick(()=>{ 
            if(!this.Scroll) { 
              this.Scroll = new BScroll(this.$refs.wrapper,{ 
                click: true,      // 配置允许点击事件
                scrollY: true     // 开启纵向滚动
              })
            } else { 
              this.Scroll.refresh()    // 重新计算 better-scroll，当 DOM 结构发生变化的时确保滚动效果正常
            }
          })
        }
      },
      mounted() { 
        this.initScroll()
      }
    }
    </script>

##### 在组件的CSS中（stylus 语法） #####

<style lang="stylus" scoped>
    .wrapper
      width 100%
      position absolute
      top 0
      bottom 0
      overflow hidden
    </style>

### 二、 水平滚动 ###

##### 在组件模板template中布局 #####

<template>
      <div class="wrapper" ref="wrapper">
        <ul ref="content">
          <li v-for="item in goods" class="item">
            <span class="text">
              { { item.name}}
            </span>
          </li>
        </ul>
      </div>
    </template>

##### 在组件钩子函数methods中定义方法（略有不同） #####

<script>
    export default { 
      data() { 
    	return { 
    	  goods: [],
    	  Scroll: null
    	}
      },
      methods: { 
      	initScroll() { 
      	  // 给内层盒子设置宽度，不设置宽度的话无法滚动
      	  let width = this.goods.length * 60
      	  // 如果有外边距，可以这样写。需要去掉最后一个元素的外边距，在后面减一下
      	  // let width = this.goodslength * (60 + 10) - 10
          this.$refs.content.style.width = width + 'px'
          this.$nextTick(()=>{ 
            if(!this.Scroll) { 
              this.Scroll = new BScroll(this.$refs.wrapper,{ 
                click: true,      // 配置允许点击事件
                scrollX: true,    // 开启横向滚动
                eventPassthrough: 'vertical'  // 当设置 eventPassthrough 为 'vertical' 的时候，scrollY 无效
              })
            } else { 
              this.Scroll.refresh()     // 重新计算 better-scroll，当 DOM 结构发生变化的时确保滚动效果正常
            }
          })
        }
      },
      mounted() { 
        this.initScroll()
      }
    }
    </script>

##### 在组件的CSS中（stylus 语法） #####

<style lang="stylus" scoped>
    .wrapper
      width 100%
      overflow hidden
      .content
      	white-space nowrap
      	.item
      	  float left
          width 60px
    </style>

发表评论取消回复

表情：

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

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

相关阅读

相关使用CSharp实现滑动窗口中位数算法

滑动窗口中位数是指在一个固定大小的窗口中，随着窗口滑动而求出的中位数的值。要使用 C\ 实现滑动窗口中位数算法，可以使用优先队列或堆来维护窗口中的元素。可以使用一个小根堆和

红太狼/ 2024年03月26日 09:29/ 0 赞/ 65 阅读

相关快速入门在Vue中使用滑动插件Swiper

前言 swiper 开源、免费、强大的滑动插件。 swiper中文网 [https://www.swiper.com.cn/][https_www.swiper

柔情只为你懂/ 2023年10月18日 11:57/ 0 赞/ 31 阅读

相关 Vue 实现滑动验证码

使用插件 [vue-puzzle-vcode][]，安装方法如下 npm install vue-puzzle-vcode --save 使用方法如下，更多参数请查

绝地灬酷狼/ 2023年01月11日 08:48/ 0 赞/ 160 阅读

相关 PC项目——vue 脚手架中实现阿里云人机滑动验证

转自๑柯帆๑ 找半天才找到这个可用的 [vue 脚手架中实现阿里云人机滑动验证][vue] 一、报错问题解决描述：照官网写的引入方式引入vue报错 AWSC

你的名字/ 2022年11月13日 10:23/ 0 赞/ 175 阅读

相关 vue实现图片滑动验证功能——功能实现

图片滑动验证，是目前比较常见的验证方式，主要目的是防止用户利用机器人自动注册、登录、灌水。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

今天药忘吃喽~/ 2022年08月31日 15:12/ 0 赞/ 479 阅读

相关在ViewPager中使用Fragment实现界面左右滑动

布局文件主要有activity\_main和各个view：在activity\_main布局中引入android.support.v4包 <RelativeLay

Myth丶恋晨/ 2022年08月18日 00:43/ 0 赞/ 228 阅读

相关移动端滚动插件 BetterScroll

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

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

相关 vue使用betterscroll解决滚动

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

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

相关 vue中使用better-scroll实现滑动

下载 better-scroll npm install better-scroll --save 注意：必须包含两个大的div，外层和内层div

亦凉/ 2021年09月19日 00:18/ 0 赞/ 262 阅读

相关 vue中使用better-scroll实现页面滑动

1、安装better-scroll npm install--save better-scroll 2、在组价中引用 import BScroll from 'bette

待我称王封你为后i/ 2021年09月16日 21:32/ 0 赞/ 605 阅读