微信h5页面在进行下拉操作的时候会出现网址,如下图:
在很多时候,并不想暴露这个网址,这时候可以模拟微信下拉操作,从而避免这种情况。而模拟这种操作可以一个叫 better-scroll 插件实现。
这里说下大概用法:
安装
NPM
better-scroll 托管在 Npm 上,执行如下命令安装:
npm install better-scroll --save
接下来就可以在代码中引入了,webpack 等构建工具都支持从 node_modules 里引入代码:
import BScroll from 'better-scroll'
如果是 ES5 的语法,如下:
var BScroll = require('better-scroll')
script 加载
better-scroll 也支持直接用 script 加载的方式,加载后会在 window 上挂载一个 BScroll 的对象。
你可以直接用:https://unpkg.com/better-scroll/dist/bscroll.min.js
这个地址。也可以把 dist 目录下的文件拷贝出去发布到自己的 cdn 服务器。点击打开链接
使用
import BScroll from 'better-scroll'//es6模块化加载方式,如果是script加载的不需要这行代码
let app = document.querySelector('#app')//body的id
let scroll = new BScroll(app) //实例化
better-scroll 提供了一个类,实例化的第一个参数是一个原生的 DOM 对象。当然,如果传递的是一个字符串,better-scroll 内部会尝试调用 querySelector 去获取这个 DOM 对象,所以初始化代码也可以是这样:
import BScroll from 'better-scroll'
let scroll = new BScroll('.wrapper')
better-scroll还有其他的用处,比如各种场景的局部滚动等等,具体可以去官方文档查看