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等
阅读全文
0 0
- gulp之使用iscrolljs.com实现区域滚动
- 使用Gulp实现实时刷新
- 使用gulp实现前端自动化
- iscrollJs使用zoom插件的时候,图片放大模糊解决办法
- Win32使用剪切区域实现酷狗动态歌词特效:动态歌词颜色滚动覆盖效果
- 使用gulp实现文件更改自动刷新
- 使用gulp实现静态资源版本号替换
- Gulp前端自动化之 ejs插件使用
- webstrom配置使用之git和gulp
- 前端构建工具之Gulp使用记录
- Gulp 使用
- gulp使用
- gulp使用
- gulp使用
- gulp使用
- 使用Gulp
- gulp使用
- gulp使用
- Linux学习2-分区之分区设备文件名及挂载
- c语言换行符
- css垂直居中
- erlang的term反序列化,string转换为term
- iOS中常用数据持久化总结
- gulp之使用iscrolljs.com实现区域滚动
- 在robot上同时使用kinect和hokuyo(使用多个扫描传感器)
- Xcode:崩溃堆栈分析和Crash文件符号化
- 前端-html+css+javascript入门
- 初学者路径规划 | 人生苦短我用Python
- 2017.10.12 礼物(zjoi2011) 失败总结
- 【转】数据库基本知识:(三)数据操作-增
- Android 广播的那些事儿
- 用shiro加密器给登录密码加密 如何在添加用户的时候给用户密码加密