众所周知,ES6之前是没有class语法的,其实很多开发人员都一直说,js不需要类似于java中的类,但是我感觉,class是不能少的,而且很重要,因为它极大的改善了代码的复用性,前端面向对象思想更加依赖于class这个目前看起来会越来越重要的语法,而且如果配合module,你可能会越来越感觉js越来越像java语法模式了,不过有一点需要注意,如果不同页面需要在方法中写入的代码不同,那么这个用起来就不那么舒服了。。。ok,废话不多说,来点项目实战干货
解决的问题:前端封装iscroll.js,解决手机端滚动条不触发问题
1.封装module的js文件
2.定义iscrollObj对象,用constructor给对象定义一个构造函数,用于实例化对象
3.给对象定义相应的方法,用于功能的实现
4.export导出对象
class iscrollObj {
constructor(obj,myScroll) {
this.obj = obj;
this.myScroll = myScroll
}
loaded(obj = this.obj,myScroll = this.myScroll) {
myScroll = new IScroll(obj, {
scrollbars: false, //有滚动条
mouseWheel: true, //允许滑轮滚动
fadeScrollbars: true, //滚动时显示滚动条,默认影藏,并且是淡出淡入效果
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true
});
myScroll.on('scrollEnd', function() {
debugger
console.log(myScroll.maxScrollY) // 获取滚动条最大高度
console.log(myScroll.y) // 获取滚动条当前位置
console.log('-----------------------------------------------------------')
if (myScroll.y < myScroll.maxScrollY || myScroll.y == myScroll.maxScrollY) {
console.log('到底了')
myScroll.refresh()
}
});
}
iScrollClick() {
if (/iPhone|iPad|iPod|Macintosh/i.test(navigator.userAgent)) return false;
if (/Chrome/i.test(navigator.userAgent)) return (/Android/i.test(navigator.userAgent));
if (/Silk/i.test(navigator.userAgent)) return false;
if (/Android/i.test(navigator.userAgent)) {
var s = navigator.userAgent.substr(navigator.userAgent.indexOf('Android') + 8, 3);
return parseFloat(s[0] + s[3]) < 44 ? false : true
}
}
}
export{
iscrollObj,
}
二.引用此js文件,实例化对象并调用方法
<
script type="module" async>
let myScroll
import {iscrollObj} from '__PUBLIC__/js/esMould/iscroll_method.js' // 引入js文件
let iscroll= new iscrollObj('.deteilBottom',myScroll)
$(document).ready(function () {
iscroll.loaded() // 根据需要,是不是需要在页面初始化调用方法
})
</script>