PHPer快速上手VUE——边学边练3–再做一个vue页面

    |     2020年6月23日   |   学习偶记   |     评论已关闭   |    2

 

这个页面,我们分析一下,发现缺了一个底下的导航栏,就是所谓的Tabbar。导航栏也要做相应的修改。这两个导航栏,都需要做成组件。

头部导航的一些思路:

A、有些页面是不需要显示头部导航的,所以需要有一个变量,告诉程序是否显示头部导航。

B、还得有一个回退<键,同样要有一个变量告诉程序是否显示回退。

C、头部导航上面有标题。

D、订单如果比较长的话,要有回到顶部的按钮。

底部导航

A、有些页面是不需要显示头部导航的,所以需要有一个变量,告诉程序是否显示底部导航。

这2个都可以复用,作为公共组建,所以放在公共组建目录下。

而搜索框,因为有各种各样的情况,不适合作为组件。

中间订单列表:

A、列表有可能会翻页,所以我要做个上拉加载。

B、需要类似ajax的东西去获取后台数据 【npm install axios】参考:https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

C、简单的搜索。

开始工作:

1、我们先建立一个\src\api 目录,用于放获取数据的api js文件

2、然后在\src\components 目录下,建立头部、底部导航、加载的组件

3、然后在\src\page 目录下,建立订单列表页面OrderList.vue

先放出OrderList.vue的核心代码,先不管它如何实现,只是为了学习一些概念。

概念学习点:

A、my-scroll是下拉组件,先把它忽略掉。

B、v-for :key 是需要学习的。对于PHPer来说,相对来说比较简单。参考资料:https://cn.vuejs.org/v2/guide/list.html

C、vue背景图片在v-for中的实现:

这一个东西网上很多,但是….你懂得。

如果没有加那个上拉组件,加上代码,形成的效果如下:

这些都可以忽略,毕竟编程技巧之类的,很多人都会了,我们主要学习的是如何搭建这个玩意。所以不要着急实现上面的效果。

大家需要学习一些基础知识:

vue路由手册:https://router.vuejs.org/zh/guide/

由于我们是快速上手,所以我就直接上手带大家入坑。下一篇,告诉你如何设置路由。

噢!评论已关闭。