nodeType这个不是DOM元素的默认属性吗,还会读不到吗?是因为DOM元素没有获取到吗?
登陆购买课程后可参与讨论,去登陆吧
同学你好,猜测可能是由于DOM元素没有获取到导致的报错,建议同学先下载源码对比排查下,如果排查不出来,可以将你自己写的相关粘贴过来,老师帮助测试下。
下图所示文件中的代码:
祝学习愉快~
base.js:
import { ELEMENT_NODE_TYPE ,SLIDER_ANIMATION_CLASS_NAME} from './constants'; import DEFAULTS from './defaults'; class BaseSlider { constructor(el, options) { if (el.nodeType !== ELEMENT_NODE_TYPE) { throw new Error('实例化的时候,请传入DOM元素!'); } //实际参数 this.options = { ...DEFAULTS, ...options } const sliderEl = el; const sliderContentEl = sliderEl.querySelector('.slider-content'); const sliderItemEls = sliderContentEl.querySelectorAll('.slider-item'); //添加到this上,为了在方法中使用 this.sliderEl = sliderEl; this.sliderContentEl = sliderContentEl; this.sliderItemEls = sliderItemEls; //限定索引范围 this.minIndex = 0; this.maxIndex = sliderItemEls.length - 1; this.currIndex = this.getCorrectedIndex(this.options.initialIndex); //获取每个slider-item的宽度(每次移动的距离) this.itemWidth = sliderItemEls[0].offsetWidth; this.init(); } //初始化 init() { //为每个slider-item设置宽度 this.setItemsWidth(); //为slider-content设置宽度 this.setContentWidth(); //切换到初始索引initialIndex this.move(this.getDistance()); //开启动画 if(this.options.animation){ this.openAnimation(); } } //开启动画 openAnimation(){ this.sliderContentEl.classList.add(SLIDER_ANIMATION_CLASS_NAME); } //关闭动画 closeAnimation(){ this.setAnimationSpeed(0); } //设置切换动画速度 setAnimationSpeed(speed=this.options.speed){ this.sliderContentEl.style.transitionDuration=`${speed}ms`; } //不带动画的移动 move(distance){ this.sliderContentEl.style.transform=`translate3d(${distance}px,0px,0px)`; } //带动画的移动 moveWithAnimation(distance){ this.setAnimationSpeed(); this.move(distance); //移动完毕关掉动画,设置事件监听 this.sliderContentEl.addEventListener( 'transitionend', ()=>{ this.closeAnimation(); }, false ); } //获取要移动的距离 getDistance(index=this.currIndex){ return -this.itemWidth*index; } //为每个slider-item设置宽度 setItemsWidth() { for (const item of this.sliderItemEls) { item.style.width = `${this.itemWidth}px`; } } //为slider-content设置宽度 setContentWidth() { this.sliderContentEl.style.width = `${this.itemWidth * this.sliderItemEls.length}px`; } //获取修正后的索引值 getCorrectedIndex(index) { if (index < this.minIndex) return this.maxIndex; if (index > this.maxIndex) return this.minIndex; return index; } } export default BaseSlider;
index.js:
import BaseSlider from './base'; import keyboard from './keyboard'; //继承基类 class Slider extends BaseSlider{ constructor(el,options){ super(el.options); this.bindEvent(); } bindEvent(){ keyboard.bindEvent(this); } } export default Slider;
:
import './slider.css'; import Slider from './module'; new Slider(document.querySelector('.slider'),{ initialIndex:1 });
//css // import './css/reset.css'; import './css/css.css'; //公共样式 import 'styles/base.css'; import 'styles/reset.css'; import 'styles/layout.css'; //js import './js/backtotop'; import './js/menu'; //组件 import 'components/topbar'; // import './components/carousel'; import './components/slider'; import './components/jjzyx';
同学你好,根据粘贴的代码测试,是因为components/slider/module/index.js文件中,传入super方法中的参数,将逗号写成了点,导致报错。建议修改:
哦哦哦哦哦!谢谢老师!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
登录后可查看更多问答,登录/注册
入行前端,是明智的选择!市场需求大,就业前景好,入行门槛低,小白易上手 全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建
157 1
75 1
31 2
201 5
155 1
购课补贴联系客服咨询优惠详情
慕课网APP您的移动学习伙伴
扫描二维码关注慕课网微信公众号
在线咨询
领取优惠
免费试听
领取大纲
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星