Vue进阶知识（三）------页面滚动

一、初识better-scroll

• 使用原因：因原生页面滚动存在呆板，功能单一，不稳定等原因开发
• 原生滚动写法

  <style scoped>
  div {							// 这个是父盒子的标签样式
    height: 200px;				// 设定父盒子高度
    overflow-y: auto;				// 设定滚动方向
  }
  </style>
  
  

• 功能：重点针对手机端开发，可以实现页面滚动弹簧效果、上拉刷新、下拉加载、监控滚动区域内各个事件触发的参数等

---

• 官方文档（重要）：点此进入
• 页面示意
  
• 使用前提
  • 初始高度：wrapper必须有高度
  • 触发高度：content高度>wrapper
  • 作用域：仅对wrapper中的第一个子元素起作用

二、安装

• 安装命令：npm install better-scroll --save
• 引入命令：

  import BetterScroll from 'better-scroll'
  let bs = new BetterScroll('.wrapper', {			// 此为常规JS写法（了解即可）
  												// 此处写配置项（见官方文档），如：---------wheel: true,
  })		
  

三、最简封装

功能：实现窗口弹簧效果，即手指向下点按屏幕拉到极限后松开，滚动窗口区域内容会回弹到初始位置

• 封装组件

  <template>
    <div class="wrapper" ref="wrapper">		// 注意1：BS作用的父容器，ref用于提供接口
      <div class="content">					// 注意2：BS仅对包裹的第一个子元素起作用
        <slot></slot>							// 插槽：此处接收待滚动内容
      </div>
    </div>
  </template>
  
  <script>
  	import BScroll from 'better-scroll'		// 引入BS，类似npm安装的组件都是这么引入的
  	
  	export default {
  	  name: 'scroll',
  	  data () {
  	    return {
  	      scroll: null						// 初始化scroll对象
  	    }
  	  },
  	  // 创建BS实例位置选mounted：因created阶段，$refs还没创建，this.scroll会为undefined，所以放在这里创建
  	  mounted () {						
  	  // 创建BS实例写法：this.$refs.wrapper也可直接换成样式名.wrapper，但若其他文件有wrapper样式的话可能会取错，
  	  // ref绑定在组件中，this.$refs.名字，获取到的是组件对象（普通元素中，则普通元素对象）
  	    this.scroll = new BScroll(this.$refs.wrapper, {			
  			// 此处写配置项（见官方文档），如：---------wheel: true,
  	    })
  	  }
  	}
  </script>
  
  <style>
  </style>
  

• 父组件调用

  <template>
    <Scroll class="wrapper">						// 3. 使用组件，并配置样式
    
      <h1>测试语句</h1>
      
      // 增加足够多的标签，至少比wrapper样式的高度高，才会触发滚动效果
      
      <h1>测试语句</h1>
      
    </Scroll>
  </template>
  
  <script>
  import Scroll from './Scroll'					// 1.引入Scroll封装组件，注意路径
  
  export default {
    components: {
      Scroll										// 2.注册组件
    }
  }
  </script>
  
  <style scoped>									// scoped：作用域仅限制在本文件
  .wrapper {
    height: 200px;								// 4.必须要有高度，否则不触发
    overflow: hidden;								// 超出区域部分截除
  }
  </style>
  

四、官方文档举例

4.1 派发事件

• 功能：滚动中，实时监控Y坐标

• 代码：

    mounted () {
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true,									// 1.配置项开关：官方文档--》核心滚动--》配置项
        probeType: 3									// 2a.事件项开关：官方文档--》API--》事件	
      })
  
      this.scroll.on('scroll', (position) => {		// 2b.事件：官方文档--》API--》事件
        console.log(position)							// 2c.自定义函数：在事件中定义用户操作
      })
    }
  

  位置：在<script>标签中
  备注（二者彼此独立）：

  • 注释1：开启scroll某些功能的开关
  • 注释2：开启scroll某些事件的启用

  上一篇：Vue进阶知识（二）------制作商城TabBar
  下一篇：Vue进阶知识（四）------前端框架