老师帮忙看下

就亚洲不能点，一点就报错

main/index.js import './main.css'; import Tab from '../tab'; import Content from '../content'; import 'components/loading'; import {set, get} from 'utils/sessionStorage'; const tabEl=document.querySelector('.tab'); const tab=new Tab(tabEl); // tab.setActiveltem(); const content=new Content(document.getElementById('destination-content')); // tab.to(1).then(data=>{ // content.set(data); // }); const itemEls=tabEl.querySelectorAll('.tab-item'); // 事件代理（原理：利用事件冒泡机制） tabEl.addEventListener('click',function(ev){ // console.log(ev.target); // contains是否包含 const itemEl = ev.target; if(itemEl.classList.contains('tab-item')){ const index=itemEl.dataset.id-1; // 本地存储临时存储 (缓存)<br> const storageName = `destination_content_${index}`;<br> const storageContent = get(storageName); if(storageContent){ tab.setActiveltem(index); content.set(storageContent); }else{ const tabPromise=tab.to(index); content.setLoading(); tabPromise.then(data=>{ content.set(data); set(storageName, data); }); } } },false); itemEls[0].click(); 

session那个文件是复制老师的

qq_Unique彼岸花丶花海_0 2021-05-31

源自：“仿穷游”商城webapp 4-6 终止请求和使用本地存储

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2021-05-31 11:29:42

同学你好，老师测试代码没问题

建议将这几个文件中的代码全部粘贴上来

老师替换测试下，看看是不是这几个的问题。

另外建议提交问题遇到审核时，不要再次提交，老师们可以看到，避免重复。

祝学习愉快！

收起回答

qq_Unique彼岸花丶花海_0 提问者 #1

Tab/index.js import './tab.css'; import { getData, getDelayedData } from 'api/getData'; 

// https://www.imooc.com/api/mall-wepApp/destination/content<br>//发送请求     数据结构是[{URL,TEXT}]<br>import { URL, TAB_ITEM, TAB_ITEM_A } from './config';<br>class Tab {<br>    // el指选项卡<br>    constructor(el) {<br>        this.itemEls = el.querySelectorAll(TAB_ITEM);<br><br>    }<br>    setActiveltem(index) {<br>        for (const itemEl of this.itemEls) {<br>            itemEl.classList.remove(TAB_ITEM_A);<br>        }<br>        this.itemEls[index].classList.add(TAB_ITEM_A);<br>    }<br>    to(index) {<br>        //取消上次请求<br>        //为什么取消 因为如果网络环境卡 然后快速切换的话会出BUG <br>        if (this.dataPromise && this.dataPromise.xhr) {<br>            this.dataPromise.xhr.abort();<br>        }<br><br><br>        this.setActiveltem(index);<br>        this.dataPromise = getData(`${URL}/${this.itemEls[index].dataset.id}`);<br>        //dataset.id 获取id<br>        return this.dataPromise;<br><br>    }<br>}<br>export default Tab;<br>

Content/index.js import './content.css'; import render from './content.art'; import renderLoading from 'components/loading/loading.art'; class Content { 

//el指父类<br>    constructor(el) {<br>      this.el = el;<br>    }<br><br>    set(data) {<br>      this.el.innerHTML = render({<br>        contents: data<br>      });<br>    }<br><br>    setLoading() {<br>      this.el.innerHTML = renderLoading();<br>    }<br>  }<br><br>  export default Content;<br><br>

session const storage = window.sessionStorage; 

// 设置<br>const set = (key, value) => {<br>  storage.setItem(key, JSON.stringify(value));<br>};<br><br>// 获取<br>const get = key => {<br>  return JSON.parse(storage.getItem(key));<br>};<br><br>// 删除<br>const remove = key => {<br>  storage.removeItem(key);<br>};<br><br>// 清空<br>const clear = () => {<br>  storage.clear();<br>};<br><br>export { set, get, remove, clear };<br><br>

2021-05-31 11:33:37