gulp之使用iscrolljs.com实现区域滚动

来源:互联网 发布:矩阵式led大灯 编辑:程序博客网 时间:2024/06/05 00:29

区域滚动主要是在屏幕的某一块区域实现上下滑动到顶部或底部的效果。
  使用iscrolljs.com可以实现滑动到顶部或底部时添加效果。比如:滑动到顶部时进行刷新,滑动到底部时加载更多,这些都是我们在手机端经常可以看到的。
1。在iscrolljs.com上下载所需要的js文件,从下载的压缩包中取出iscroll-probe.js文件中,放到项目中的 libs 文件夹中。
ps:
 项目中的文件夹:libs—放从第三方引入的包;modules—自己做的一些js包; utils—工具包
2。将iscrolljs引入到position.js 文件中

var IScroll = require('../libs/iscroll-probe')

 滑动函数:

var posi = {  doScroll: function () {    new IScroll('.m-index section', {    })  } }

 进行接口暴露:module.exports = posi
3。在app.js 文件中引入position.js 文件,并调用

var positionJS = require('./modules/position.js');
positionJS.doScroll();

4。注意事项:
  1)视口要有固定高度,用来控制显示的大小
  2)内容的高度要高于视口的高度,否则无法出现滑动条
  3)视口元素只能有一个子元素,多个的话,也只会加到第一个子元素上。
  4)视口元素不能有display:flex等

原创粉丝点击