better-scroll滚动的同时样式透明度发生变化

1.安装 better-scroll

npm install better-scroll -S 

2.在vue中引入

import BetterScroll from 'better-scroll'

let bs = new BetterScroll('.wrapper', {

})

3.具体使用

<div 
				class='header-bar' 
				v-show='!isShow'
				:style='styleOption'
				>内容</div>

data(){
  return{ 
    isShow:true,
    styleOption:{},
	BetterScroll:''
		}
	}

mounted(){
		this.BetterScroll = new BetterScroll(this.$refs.wrapper, {
			probeType: 3,
			bounce: false,
			click:true
		})
		this.BetterScroll.on('scroll',(pos)=>{
			let posY = Math.abs( pos.y );
			//180不是固定的看可以具体要滚动的高度大概决定
			let opacity = posY / 180;
			
			opacity = opacity > 1 ? 1 : opacity;
			
			this.styleOption = {
				opacity:opacity
			}
				
			if( posY >= 50 ){
				this.isShow = false;
			}else{
				this.isShow = true;
			}
		})
	},