效果图
1、首先在app.vue中,给路由添加keep-alive,使其能够被缓存
2、配置路由 router/index.js
3、书写各部分组件
src/pages/category/header.vue
<template> <div class="header"> <i class="iconfont icon-scan header-left"></i> <div class="header-center">搜索框</div> <i class="iconfont icon-msg header-right"></i> </div> </template> <script> export default { name:'CategoryHeader' } </script> <style lang="scss" scoped> .header{ background-color:rgba(222,24,27,0.9); transition:background-color 0.5s; display: flex; justify-content: space-between; align-items: center; padding:5px 20px; .iconfont{ font-size:24px; color:#fff; } .header-center{ flex:1; } } </style>
src/pages/category/tab.vue
<template> <div class="tab-container"> <ul class="tab"> <li class="tab-item" :class="{'tab-item-active':item.id===curId}" v-for="(item,index) in items" :key="index" @click="switchTab(item.id)"> {{item.name}} </li> </ul> </div> </template> <script> import {categoryNames} from './config'; export { name:'CategoryTab',data(){ return{ items:categoryNames,curId:"" } },created(){ this.switchTab(this.items[0].id); },methods:{ switchTab(id){ this.curId=id; this.$emit("switch-tab",id);//派发事件,传递id } } } </script> <style lang="scss" scoped> .tab-container{ width:100%; height:100%; overflow:auto; } .tab { width: 100%; height:auto; &-item { height: 46px; background-color: #fff; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; color: #080808; font-size: 14px; font-weight: bold; text-align: center; line-height: 46px; overflow: hidden; text-overflow: ellipsis; white-space: Nowrap; &:last-child { border-bottom: none; } } &-item-active { background: none; border-right: none; color: #f23030; } } </style>
src/pages/category/content.vue
<template> <div class="content-wrapper"> <div class="loading-container" v-if="isLoading"> <div class="loading-wrapper"> <me-loading/> </div> </div> <scrollbar ref="scroll" @pull-up="pullUp" @pull-down="pullRefresh"> <div class="content"> <div class="pic" v-if="content.banner"> <a :href="content.banner.linkUrl" class="pic-link"> <img @load="updateScroll" :src="content.banner.picUrl" class="pic-img"> </a> </div> <div class="section" v-for="(section,index) in content.data" :key="index" > <h4 class="section-title">{{section.name}}</h4> <ul class="section-list"> <li class="section-item" v-if="item.picUrl"> <img v-lazy="item.picUrl" class="section-img" /> </p> <p class="section-name">{{item.name}}</p> </a> </li> </ul> </div> </div> </scrollbar> <div class="g-backtop-container"> <me-backtop :visible="backtopVisible" @backtop="backtop" /> </div> </div> </template> <script> import {getCategorys} from 'api/category'; import MeLoading from 'components/loading'; import Scrollbar from 'components/scroll'; import MeBacktop from 'components/backtop'; import storage from 'assets/js/storage.js'; import {CATEGORY_CONTENT_KEY,CATEGORY_CONTENT_UPDATE_TIME} from './config' { name:'CategoryContent'default:''{ content:{},isLoading:falsethis.isLoading=true; this.getContent(id).then(()=>{ ; this.backtop();回到顶部 }); } },methods:{ getContent(id){ let content=storage.get(CATEGORY_CONTENT_KEY); let updateTime; const curTime=new Date().getTime(); if(content && content[id]){ updateTime=content[id].updateTime||0; if(curTime-updateTime<CATEGORY_CONTENT_UPDATE_TIME){未超时 console.log('从缓存获取'); return this.getContentByStorage(content[id]);从缓存获取 }else{ console.log('从服务器获取'this.getContentByHTTP(id).then(()=>{从服务器获取 this.updateStorage(content,id,updateTime);更新缓存 }); } }{ console.log('从服务器获取'); 从服务器获取 }); } },getContentByStorage(content){ this.content=content.data; return Promise.resolve();返回一个成功的promise对象 },getContentByHTTP(id){ return getCategorys(id).then(data=>{ new Promise(resolve=>{ if(data){ data.content; resolve(); } }) }) },updateStorage(content,curTime){ content=content || {}; content[id]={}; content[id].data=this.content; content[id].updateTime=curTime; storage.set(CATEGORY_CONTENT_KEY,content); },updateScroll(){ this.$refs.scroll && .$refs.scroll.update(); },scrollEnd(translate,swiper,pulling){下拉刷新结束 显示回到顶部按钮 this.backtopVisible=translate<0 && -translate>swiper.height;向下拉并且距离大于一屏 this.$refs.scroll.scrollTop();this.getContent(this.curId).then(()=> end(); }); } } } </script> <style lang="scss" scoped> .g-backtop-container{ position: absolute; z-index:1100; right:10px; bottom:60px; } .content-wrapper { position: relative; height: 100%; } .loading-container { position: absolute; top: 0; left: 0; z-index: 1190; display: flex; justify-content: center; align-items: center; flex-direction: row; width: 100%; height: 100%; .mine-loading { color: #fff; font-size: 14px; } } .loading-wrapper { width: 50%; padding: 30px 0; background-color: rgba(0,0.4); border-radius: 4px; } .content { padding: 10px; } .pic { margin-bottom: 12px; &-link { display: block; } &-img { width: 100%; } } .section { margin-bottom: 12px; &:last-child { margin-bottom: 0; } &-title { height: 28px; line-height: 28px; color: #080808weight: bold; } &-list { display: flex; flex-wrap: wrap; background-color: #fff; padding: 10px 10px 0item { width: (100% / 3); } &-pic { position: relative; width: 80%; padding-bottom: 80%; margin: 0 auto; } &-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%name { height: 36px; line-height: 36px; text-align: center; overflow: hidden; text-space: Nowrap; } } .g-backtop-container { bottom: 10px; } </style>
src/pages/category/index.vue
<template> <div class="category"> <div class="g-header-container"> <category-header /> </div> <div class="g-content-container"> <div class="sidebar"> <category-tab @switch-tab="getCurId" /> </div> <div class="main"> <category-content :curId="curId" /> </div> </div> </div> </template> <script> import CategoryHeader from './header'; import CategoryTab from './tab'; import CategoryContent from './content' { name:'Category'{ curId:''id; } } } </script> <style lang="scss" scoped> html,body{ width:100%; } .category { overflow:hidden; width:100%; background-color: '#f5f5f5'; } .g-content-container { width:100%; display: flex; } .sidebar { width: 80px; height: 100%; } .main { flex: 1; height: 100%; } </style>
4、储存常量和服务器获取来的数据
src/pages/category/config.js
export const CATEGORY_CONTENT_KEY='cyymall-category-content-key'; export const CATEGORY_CONTENT_UPDATE_TIME=1*24*60*60*1000;1天 export const categoryNames = [ { 'name': '热门推荐' },{ 'name': '慕淘超市''name': '国际名牌''name': '奢侈品''name': '全球购''name': '男装''name': '女装''name': '男鞋''name': '女鞋''name': '内衣配饰''name': '箱包手袋''name': '美妆个护''name': '钟表珠宝''name': '手机数码''name': '电脑办公''name': '家用电器''name': '食品生鲜''name': '酒水饮料''name': '母婴童鞋''name': '玩具乐器''name': '医药保健''name': '计生情趣''name': '运动户外''name': '汽车用品''name': '家居厨具''name': '家具家装''name': '礼品鲜花''name': '宠物生活''name': '生活旅行''name': '图书音像''name': '邮币''name': '农资绿植''name': '特产馆''name': '慕淘金融''name': '拍卖''name': '房产''name': '二手商品' } ];
5、axios获取数据
src/api/category.js
import axios from 'axios'; CancelToken:快速发送多个请求时,取消前面的请求,以最后一个为准 const CancelToken=axios.CancelToken; let cancel; 获取数据 ajax export const getCategorys=(id)=>{ cancel && cancel("取消了前一次请求"); cancel=null; let url='http://www.jb51.cc/api/category/content/'+id; axios.get(url,{ cancelToken:new CancelToken(function executor(c){ cancel=c; }) }).then(res=>{ if(res.data.code===0){ console.log("获取category成功" res.data; } throw new Error('没有成功获取到数据'); }).catch(err=>{ console.log(err); }); }
6、localstorage操作缓存
const storage = window.localStorage; export { set(key,val) { if (val === undefined) { ; } storage.setItem(key,serialize(val)); },get(key,def) { const val = deserialize(storage.getItem(key)); return val === undefined ? def : val; },remove(key) { storage.removeItem(key); },clear() { storage.clear(); } }; serialize(val) { JSON.stringify(val); } deserialize(val) { if (typeof val !== 'string') { undefined; } try { JSON.parse(val); } catch (e) { return val || undefined; } }
最后补充一下,关于 $nextTick
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。