购物街0-首页开发(Vue购物,学它就对了!)

零、说明

本demo是跟随coderwhy老师学习Vue做的,跟着视频一点点敲的,视频可以在b站上找到,仅限个人学习,侵删(应该不涉及侵权吧,就当给老师宣传了哈哈哈,视频真的讲的很细致,一点点学还是有收获的,自己码的demo在这里!博客里有github

一、整体思路

1、效果图

先上整体效果图~
image.png)image.png
这是我跟着视频做的,主要分为四个功能模块“首页、分类、购物车、我的”

2、首页功能

目前基本实现首页,首页中包括以下几个功能(从上到下):

  1. 标题栏Navbar
  2. 轮播图swiper
  3. 本周流行recommend
  4. 商品栏tab-control
  5. 商品列表goodList
  6. 导航栏(应该是0步,最先开始)

最下方的导航栏作为公共组件,可复用。

二、首页具体实现

0、导航栏tabbar

思想:组件复用
image.png
image.png

1, CSS格式引用

normalize.css:常用格式,从github上引用

css引用方式:
(1)在html中:<link ref="xx.css">
(2)在另外一个css中: @import"css文件路径/url"

2,组件引用路径配置

根目录下创建 vue.config.js
image.png

图片的引用路径,前加~
image.png
修改icon网站图标:在public中 favicon.ico

3, 顶端导航组件

nav-tab-bar,创建组件,使用插槽将顶部的bar分为左中右三部分,在首页中只展示center的slot内容“购物街”
image.png

4, 请求多个数据

image.png

  • image.png

    5, 轮播图(后续专门说)+首页推荐

    6, tab-control

    流行、新款、精选
    position: sticky
    top: 44px //设置可随页面下滑,上滑到44处固定

    7, 商品列表数据,获取保存

    所有数据data{pop:{page:0,list:[]},
    news:{page:0,list:[]}
    sell :{page:0,list:[]}
    }

    8, 点击,显示相应列表数据

9, 移动端滑动效果

使用better-scroll框架(github)
安装: npm install better-scroll –save
局部滚动

ref如果是绑定在组件中的,那个通过t*his.$refs.ref名字 *获取的是一个元素对象。

10,back-top实现
监听组件的原生事件
方法一:使用修饰符click.native
image.png
方法二:在组件内使用this.$emit传给组件,再实现函数