页面滚动的设计和实现

设计思路

项目的实际高度总是大于页面高度,所以必须要添加页面滚动效果

实现页面滚动

方案一:使用原生scroll实现页面滚动,但原生scroll在移动端没有滚动惯性还会卡顿.
方案二:使用Better-Scroll实现页面滚动.
实现步骤.
一.封装BS组件.
1.由于Bs组件可以跨项目使用,所以封装在components的common文件夹里.
2.由于Bs容器只能有一个子组件,所以在子组件里设置插槽.
3.由于容器高度小于子组件高度才能可以滚动,所以要对容器设置高度.

二.安装BS插件

npm install better-scroll --save

三.导入BS插件

import BScroll from 'Better-Scroll'

四.创建一个BS实例,第一个参数绑定标签.用一个变量接收实例,方便调用.
const scroll = new better-scroll(‘tag’)

Better-Scroll的可滚动区域
Better-Scroll会计算子组件的高度作为可滚动区域,但第一次计算时,图片一般没加载完,所以此时的子组件高度是错误的,这导致子组件一部分不能滚到.

所以要等图片加载完再计算高度.
1.监听图片加载,加载完成后触发事件总线函数
原生js方法img.onload = func
Vue监听方法 @load=’’

2.监听时间总线,接收到使用refresh方法重新刷新.