lyysss / fictional-engine

vue+vant 实时热点/新闻评论购物车小商场

Vant+Vue test Project

这是一个实时热点排行榜+(新闻阅读评论.图片分享,还有小商城购物车)杂七杂八 谢谢API提供的大佬.

##实时热点API提供.https://www.printf520.com/hot.html 谢谢大佬. ##数据API 接口http://www.liulongbin.top:3005 谢谢前辈. ###感谢.我会一直继续学习下去的.

ssssss6

####一个月后回来补全坑. #####1.购物车问题. #####2.好像也没其他的.根据案例.用vant基本实现 . ######再次感谢 .下一步做一个小程序小案例.然后开发 < 电影大筛选 > 小程序.

##制作首页App组件

1. 完成 Header 区域，使用的是 Mint-UI 中的Header组件
2. 制作底部的 Tabbar 区域，使用的是 MUI 的 Tabbar.html

• 在制作 购物车 小图标的时候，操作会相对多一些：
• 先把 扩展图标的 css 样式，拷贝到 项目中
• 拷贝 扩展字体库 ttf 文件，到项目中
• 为 购物车 小图标 ，添加 如下样式 mui-icon mui-icon-extra mui-icon-extra-cart

1. 要在 中间区域放置一个 router-view 来展示路由匹配到的组件

##改造 tabbar 为 router-link

##设置路由高亮

##点击 tabbar 中的路由链接，展示对应的路由组件

##制作首页轮播图布局

##加载首页轮播图数据

1. 获取数据， 如何获取呢， 使用 vue-resource
2. 使用 vue-resource 的 this.$http.get 获取数据
3. 获取到的数据，要保存到 data 身上
4. 使用 v-for 循环渲染 每个 item 项

##改造 九宫格 区域的样式

改造 新闻资讯 路由链接

##新闻资讯 页面 制作

1. 绘制界面， 使用 MUI 中的 media-list.html
2. 使用 vue-resource 获取数据
3. 渲染真实数据

##实现 新闻资讯列表 点击跳转到新闻详情

1. 把列表中的每一项改造为 router-link,同时，在跳转的时候应该提供唯一的Id标识符
2. 创建新闻详情的组件页面 NewsInfo.vue
3. 在 路由模块中，将 新闻详情的 路由地址 和 组件页面对应起来

实现 新闻详情 的 页面布局 和数据渲染

##单独封装一个 comment.vue 评论子组件

1. 先创建一个 单独的 comment.vue 组件模板
2. 在需要使用 comment 组件的 页面中，先手动 导入 comment 组件

##- import comment from './comment.vue'

1. 在父组件中，使用 components 属性，将刚才导入 comment 组件，注册为自己的 子组件
2. 将注册子组件时候的，注册名称，以 标签形式，在页面中 引用即可

##获取所有的评论数据显示到页面中

##实现点击加载更多评论的功能

1. 为加载更多按钮，绑定点击事件，在事件中，请求 下一页数据
2. 点击加载更多，让 pageIndex++ , 然后重新调用 this.getComments() 方法重新获取最新一页的数据
3. 为了防止 新数据 覆盖老数据的情况，我们在 点击加载更多的时候，每当获取到新数据，应该让 老数据 调用 数组的 concat 方法，拼接上新数组

##标签页van-tab 这个绑定事件没什么用 vant坑一个.标签页van-tab 这个绑定事件没什么用.因为它下面还有一个默认自带标签 span . 绑定事件触发不了. 而且.我想利用冒泡事件来做.但是找不到思路.不熟悉. 找了半天. vant 这个标签页提供一个onClick默认事件. 我发现可以获取到当前title 的下标, 在结合photoTitles 标题数组就能定位到我当前点的哪个子页面. 然后在获取到 它的真实ID值. 然后在次发起请求 ,单独请求它子页面的数据!!! 肯定有更好的办法. 我这个太垃圾了. 日后来补坑.

##2019年8月28日09:36:23 VUEX 数据. 全局数据. 购物车没写好.头疼.会回来补坑.