65、vue开发
2019-10-11 本文已影响0人
world_7735
解决300ms延时
配置路由vue-router产生什么结果？
两个方面：
1.多了三个组件标签router-link ，router-view，keep-alive
2.多了两个属性$router,$route
footer
methods:{
goto(path){
this.$router.replace(path)
}
}
<ul class="footer">
<li :class="{on:'/mysite'==$route.path}" @click="goTo('/mysite')">首页</li>
<li :class="{on:'/search'==$route.path}" @click="goTo('/search')">搜索</li>
<li :class="{on:'/order'==$route.path}" @click="goTo('/order')">订单</li>
<li :class="{on:'/profile'==$route.path}" @click="goTo('/profile')">我的</li>
</ul>
案例：
异步请求接口时new swiper在数据返回来之前执行了怎么办用setTimeout可以但效果不好，用nextTick即可，在此之前用watch监听数据列表categorys属性数据变化（看是否得到数据）
实现类似骨架屏效果：数据没加载出来用一张小图代替
指定大小的如下方式：
有列表的数据指定循环次数for循环出来即可
评分效果：返回的数据是score：3.2，所以要用简单的算法判断数据在哪个区间几个高亮几个阴影，是否含有一个半星（大于等于0.5时有一个半星）
组件
基础版：
改写及逻辑：
滚动监听解决方案：better-scroll
<template>
<div class="app_top">
<div style="height:100px;background:#f90;"></div>
<div class="a_all">
<div class="a1_wrap">
<ul class="a1" >
<li class="a1_li" v-for="(good,index) in goods" :key='index' :class="{on:index==currentIndex}" @click="clickMenuItem(index)">
{{good.name}}
</li>
</ul>
</div>
<div class="a2_wrap">
<ul class="a2" ref="a2">
<li class="a2_li" v-for="(good,index) in goods" :key='index' >
<h3 class="a2_tit">{{good.name}}</h3>
<div class="a2_cont" v-for=" (food,index) in good.foods">
<p>{{food.name}}-----{{food.price}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll';
export default {
data () {
return {
scrollY:0,//右侧滚动的y轴坐标（滚动过程实时监听）
tops:[],//所有右侧分类li的top的数组（列表第一次显示后就不再变化）
goods:[
{
foods:[{name:'南瓜粥',price:9}],
name:'优惠'
},
{
foods:[{name:'西瓜拼',price:2}],
name:'折扣'
}
,
{
foods:[{name:'油条',price:3},{name:'包子',price:6}],
name:'营养早餐'
}
,
{
foods:[{name:'芬达',price:3},{name:'可乐',price:2.5},{name:'百事',price:7},{name:'果粒橙',price:8}],
name:'果汁'
}
,
{
foods:[{name:'芬达',price:3},{name:'可乐',price:2.5},{name:'百事',price:7},{name:'果粒橙',price:8}],
name:'果汁'
}
,
{
foods:[{name:'芬达',price:3},{name:'可乐',price:2.5},{name:'百事',price:7},{name:'果粒橙',price:8}],
name:'果汁'
}
,
{
foods:[{name:'芬达',price:3},{name:'可乐',price:2.5},{name:'百事',price:7},{name:'果粒橙',price:8}],
name:'果汁'
},
{
foods:[{name:'芬达',price:3},{name:'可乐',price:2.5},{name:'百事',price:7},{name:'果粒橙',price:8}],
name:'果汁'
},
{
foods:[{name:'芬达',price:3},{name:'可乐',price:2.5},{name:'百事',price:7},{name:'果粒橙',price:8}],
name:'果汁'
},
{
foods:[{name:'芬达',price:3},{name:'可乐',price:2.5},{name:'百事',price:7},{name:'果粒橙',price:8}],
name:'果汁'
},
{
foods:[{name:'芬达',price:3},{name:'可乐',price:2.5},{name:'百事',price:7},{name:'果粒橙',price:8}],
name:'果汁'
},
{
foods:[{name:'芬达',price:3},{name:'可乐',price:2.5},{name:'百事',price:7},{name:'果粒橙',price:8}],
name:'果汁'
}
,
{
foods:[{name:'芬达',price:3},{name:'可乐',price:2.5},{name:'百事',price:7},{name:'果粒橙',price:8}],
name:'果汁'
}
,
{
foods:[{name:'米饭',price:1},{name:'炒饭',price:10},{name:'馒头',price:0.6}],
name:'小吃主食'
}
]
}
},
mounted(){
this.$nextTick(()=>{
this._initScroll()
this._initTops()
})
},
methods:{
//初始化滚动条
_initScroll(){
//列表显示后创建
const meunScroll= new BScroll('.a1_wrap',{
scrollY:true,
click:true
});
//probeType：2因为惯性的滑动不会触发;probeType：3惯性的滑动会触发
this.footsScroll= new BScroll('.a2_wrap',{
probeType:2,
click:true
});
//给右侧列表绑定scroll监听
this.footsScroll.on('scroll',({x,y})=>{
this.scrollY=Math.abs(y);
});
//给右侧列表绑定scroll 结束监听
this.footsScroll.on('scrollEnd',({x,y})=>{
this.scrollY=Math.abs(y);
})
},
_initTops(){
//初始化tops
const tops=[];
let top=0;
tops.push(top);
const lis=this.$refs.a2.getElementsByClassName('a2_li');
Array.prototype.slice.call(lis).forEach(li=>{
top+=li.clientHeight;
tops.push(top);
});
this.tops=tops;
},
clickMenuItem(index){
//使右侧列表滑动到对应的位置scrollTo(x,y,time)
//第一种方式 左侧按钮反应有点慢优化
//this.footsScroll.scrollTo(0,-this.tops[index],200);
//第二种方式 左侧按钮反应优化
//得到目标位置的scrolly
//立即更新scrolly（让点击的分类项成为当前分类）
this.scrollY=this.tops[index];
this.footsScroll.scrollTo(0,-this.scrollY,200);
}
},
components:{
},
computed:{
//计算得到当前分类的下标
currentIndex(){//初始和相关数据发生变化
//得到条件数据
const {scrollY,tops}=this;
//根据条件计算产生一个结果
const index=tops.findIndex((top,index)=>{
var ss=scrollY>=top&&scrollY<tops[index+1]
return scrollY>=top&&scrollY<tops[index+1];
})
//返回
return index;
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.a_all{
display: flex;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background:#fff;
height:80%;
}
.a1_wrap{
width:30%;
box-sizing:border-box;
-webkit-box-sizing:border-box;
height:100%;
overflow:hidden;
}
.a1{
}
.a1 li{
line-height:30px;
background:#f1f1f1;
font-size:14px;
padding:5px 10px;
border-bottom:1px solid #bbb;
}
.a2_wrap{
width:70%;
box-sizing:border-box;
-webkit-box-sizing:border-box;
height:100%;
overflow:hidden;
}
.a1_li.on{
background:#f90;
}
.a2_tit{
line-height:30px;
background:#a0dcc0;
font-size:14px;
padding:5px 10px;
color:#fff;
}
.a2_cont{
padding:5px 10px;
}
.a2_cont p{
line-height:30px;
font-size:14px;
color:#666;
border-bottom:1px solid #bbb;
}
</style>
查看打包文件包大小：npm run build --report
用rem开发
//index.html
<script>
// <!-- iphone 5 1rem=16px html font-size=16px -->
let htmlwidth=document.documentElement.clientWidth||document.body.clientWidth;
let htmlDom=document.getElementsByTagName('html')[0];
if(htmlwidth>750){
htmlwidth=750;
}
htmlDom.style.fontSize=htmlwidth/20+'px';
</script>
