Vue中better-scroll的使用

横向 竖向 better-scroll

better-scroll的中文文档

使用

 <div ref="wrapper">
	 <div ref="vContent">
	   <img v-for="item in 20" src="https://www.xxx.com.jpg" style="height: 100px"/>
	 </div>
</div>

划重点：真正的滑块是vContent 他的宽度得比wrapper得宽度大 才能实现滑动效果

 console.log(document.documentElement.clientWidth + 'px')
 this.$refs.vContent.style.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth + 'px'
 this.$refs.vContent.style.height = 100 + 'px'
 //wrapper这玩意是容器本身  
 //真正的滑块是vContent 他的宽度得比wrapper得宽度大 才能实现滑动效果
 //如果最后出现不能滑动的情况  请延迟操作 注意：这是下下策
 let scroll = new BScroll(this.$refs.wrapper,{
   scrollX:true,
   scrollY:false,
   click:true,//这玩意得开启 不然点击事件直接失效
   eventPassthrough: 'vertical'  // 当设置 eventPassthrough 为 'vertical' 的时候，scrollY 无效
 })

安装

npm install better-scroll -S  # 安装带有所有插件的 BetterScroll

npm install @better-scroll/core # 核心滚动，大部分情况可能只需要一个简单的滚动

import BetterScroll from 'better-scroll'

let bs = new BetterScroll('.wrapper', {
  movable: true,
  zoom: true
})

import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {})

CDN

带有所有插件的 BetterScroll

<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>

// minify
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>

let wrapper = document.getElementById("wrapper")
let bs = BetterScroll.createBScroll(wrapper, {})

不带有任何插件的 CoreScroll

<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.js"></script>

// minify
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.min.js"></script>

let wrapper = document.getElementById("wrapper")
let bs = new BScroll(wrapper, {})