阅读 13099

仿黄轶老师 Vue仿饿了么app项目 总结

better-scroll

Better-scroll可能是目前最好用的移动端滚动插件 插件在移动端使用时需要设置 click:true,否则移动端滑动无效

分开设置css样式

1,图标icon.css--文字图标样式,通过icomoon.io网站,将svg图片转成文字图标样式

2,公共base.css--处理设备像素比的一些样式,针对border-1px问题,不同设备像素比,显示的线条粗细不同

3,工具mixin.css--设备border-1px样式和背景样式

sticky-footer布局

在这个项目的header组件的详情页采用stick-footer布局

特点:如果页面内容不够长,页脚块粘贴在视窗底部; 如果内容足够长,页脚块会被内容向下推送

实现:父级 position:fixed,内容设为padding-bottom:64px,页脚相对定位,margin-top:-64px,clear:both为了保证兼容性,父级要清除浮动

cmd-markdown-logo

参考:www.jianshu.com/p/3853024d5…

要求自适应布局

1,左侧宽度固定,右侧宽度自适应

左侧固定width:80px,右侧自适应

parent:
    display:fiexd;
child-left:
    flex:0 0 80px
child-right:
flex:1
复制代码

2,元素宽度自适应设备宽度,且元素要求等宽高样式

商品详情页面的商品图片展示样式

.img_header {
    position:relative
    width:100% // width是 设备宽度
    height:0
    padding-top:100% // 高度设为0,使用padding撑开
    .img {
        position:absolute //定位布局
        top:0
        left:0
        width:100%
        height:100%
    }
}
复制代码

背景模糊效果

filter:blur(10px)

注意,所有在内的子元素也会模糊,包括文字,所以采用定位布局,背景单独占用一个层,ios有一个设置backdrop-filter:blur(10px),只会模糊背景,但不支持android

cmd-markdown-logo

transition过渡

在购买控件中使用transition过渡效果,实现添加减少按钮的动效,和小球飞入购物车的动效(模仿贝塞尔曲线的效果)

name-String用于自动生成css过渡类名

name: 'fade' 将自动拓展为.fade-enter,.fade-enter-active等。默认类名为 "v"

fade-enter
fade-enter-active
fade-leave
fade-leave-active
复制代码

seller组件

问题一:seller页面中商品商家实景图片横向滚动

解决方案:每个 li 要 display:inline-block,因为width不会自动撑开父级ul,所以需要将计算后的宽度赋值给ul的width,(每一张图片的width+margin)*图片数量-一个margin,因为最后一张图片没有margin

同时new BScroll里面要设置scrollX: true,eventPassthrough: 'vertical', // 滚动方向横向

cmd-markdown-logo

问题二:打开seller页面,无法滚动

问题分析:出现这种现象是因为better-scroll插件是严格基于DOM的,数据是采用异步传输的,页面刚打开,DOM并没有被渲染,所以,要确保DOM渲染了,才能使用 better-scroll,

解决方案:用到mounted钩子函数,同时必须搭配this.$nextTick()

cmd-markdown-logo
问题三:在seller页面,刷新后,无法滚动

问题分析:出现这种情况是因为mounted函数在整个生命周期中只会只行一次

解决方案:使用watch方法监控数据变化,并执行滚动函数 this._initScroll();this._initPicScroll();

goods,ratings,seller组件之间切换时会重新渲染

在 app.vue 内使用 keep-alive,保留各组件状态,避免重新渲染

<keep-alive>
    <router-view :seller="seller"></router-view>
</keep-alive>
复制代码

vue-router

使用<router-link>组件完成导航,<router-link> 默认会被渲染成一个 <a> 标签,但必须使用 to属性,指定连接
复制代码
// app.vue
 <!-- 导航 -->
<router-link to="/home">home</router-link>
<router-link to="/about">about</router-link>

<!-- 路由出口 组件渲染容器 -->
<router-view></router-view>
复制代码
// router: index.js

import Vue from 'vue';
import Router from 'vue-router';
import goods from 'components/goods/goods.vue';
import ratings from 'components/ratings/ratings.vue';
import seller from 'components/seller/seller.vue';

Vue.use(Router);

const routes = [{
  path: '/',
  redirect: '/goods'
}, {
  path: '/goods',
  component: goods
}, {
  path: '/ratings',
  component: ratings
}, {
  path: '/seller',
  component: seller
}];
复制代码

axios

在vue1.x的时候,vue的官方推荐HTTP请求工具是vue-resource,但是在vue2.0的时候将推荐工具改成了axios

组件提取管理

将相同样式或功能的区块单独提出来,作为一个组件。 另外组件中用到的图片等资源就近维护,即可以考虑在组件文件夹中新建images文件夹。

抽离组件遵循原则: 要尽量遵循单一职责原则,复用性更高,不要设置额外的margin等影响布局的东西


打开app应用,默认显示 goods 页面内容

想默认显示goods页面内容,有两种方法,一种是利用重定向,另一种是利用vue-router的导航式编程

1,重定向

  routes: [
    {
      path: '/',
      redirect: '/goods'  //重定向
    },
    {
      path: '/goods',
      name: 'goods',
      component: goods
    },{
      path: '/ratings',
      name: 'ratings',
      component: ratings
    },{
      path: '/seller',
      name: 'seller',
      component: seller
    }
  ]
复制代码

2,导航式编程

router.push('/Goods');
复制代码

关于ESlint

eslint 是一个js代码风格检查器,配合vue-cli脚手架中的热更新,可以很方便的定位和提示错误。在公司多人协作开发时可以确保代码风格保持一致,可以很方便的阅读他人的代码

手机访问项目

1、在config文件夹中的index.js中的host选项,将本地localhost改为0.0.0.0

cmd-markdown-logo
2、在cmd中输入ipconfig查看本地IP,
cmd-markdown-logo

4、端口号访问(http://192.168.0.110:8080),将这个网址复制到网页版“草料二维码”中,用QQ扫码访问即可

关注下面的标签,发现更多相似文章
评论