# news

**Repository Path**: gitofcjf/vue_small_project

## Basic Information

- **Project Name**: news
- **Description**: a first small project base on vue
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-11-06
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是一个规范的项目
> webpack-cli打包的项目 无法通过ip访问里面的文件  百度有方法 还没验证

## app.vue
1. 完成Header区域 使用 Mint-UI 中的 Header组件
2. 底部的Tabber 使用 Mint-UI 的Tabber
    + 在制作 购物车 图标的时候 操作会多一些：
        1. 需要引入 css文件里面的 icon.css
    + 在制作tab栏 选中高亮 的类样式
        1. 因为tab栏 变成了路由link 而路由有个linkActiveClass 直接设置成 mui的高亮类样式
3. 中间区域一个 放置一个 router-view

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

## home
================
#### 制作轮播图
1. 获取数据 通过vue-resource
2. 访问接口 获取 img的地址 保存到数组里面
    > json文件跨越问题没解决  当然可以用jq来解决
3. v-for 遍历数组 渲染img
#### 六宫格

#### 新闻页面制作
1. 绘制界面 使用mui 中的media-list.html
2. 使用vue-resource 获取数据
3. 渲染数据

#### 实现点击新闻列表 跳转详情
1. 列表的每一项 改成router-link   跳转至id标识符的url
2. 创建新闻详情的组件  newsInfo.vue
3. 路由配置

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

#### 单独分装一个comment.vue 评论组件
1. 创建comment组件模块
2. 在需要comment组件的页面中 导入 comment 组件
 - `import commment from './comment.vue'`
3. 在父组件中 使用`components` 属性 将刚才导入的comment 组件 注册为自己的 子组件
4. 将注册子组件的手  注册名称 以标签形式 在页面中 引入即可

#### 更新comment组件的 评论数据

#### 实现点击加载更多评论的功能
1. 绑定点击事件  --> 请求下一页数据
2. 让pageIndex++  重新调用getcomments() 获取下一页的数据
3. 旧comment数组 与 新获得的评论数组 应该为拼接关系

#### 发表评论
1. 文本框 双向数据绑定 
2. 绑定点击事件  
3. 校验评论是否为空
4. 发送请求 提交评论
5. 在评论列表顶部 添加自己的评论
    - 此处有点问题：如果调用getComment()方法 那么只会获得 pageIndex 的评论 前面页数的评论获取不到
    - 我们直接把自己的评论放到 评论列表的最顶部 通过数组的unshift  不请求服务器

#### 改造图片分析 按钮为 路由对应的图片链接

#### 绘制图片列表 组件页面结构并美化样式
1. 顶部滑动条
    - 借助 mui 中的 tab-top-webview-main.html 
        + 坑1：mui中的顶部滑动条 有个类样式 mui-fullscreen 会占据整个屏幕的大小 --> 遮住我们原先顶部
            * 将其删除即可
        + 坑2：mui滑动条无法正常滑动
            * 导入mui的js文件
            * 初始化：
                ```javascript
                mui('.mui-scroll-wrapper').scroll({
                    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
                });
                ```
        + 坑3：在滑动的时候 会报错
            * ```javascript
                [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
                ```
            * 解决方法：
                ```javascript
                    .mui-scroll-wrapper{
                        touch-action: none;
                    }
                ```
        + 坑4：在/home/photolist中 点击tabbar无效 原因是mui.js文件里面类名冲突
            * 我们采取吧tabber的类名换成别的
            * 将tabber的类样式 通过检查元素  把有关tabber的样式都复制 到app.vue
            * 然后把类样式的名字统一修改
    - 访问json数据  返回li列表数据  --> 图片分类
        
2. 底部图片列表
    - 图片列表需要使用懒加载  --> mint-ui 自带的lazy-load
    - 根据'lazy-load'的使用文档  尝试使用
        + 使用的时候  加载的圈圈不显示 
            * 需要完全加载Mint-UI才行  按需导入不行
    - 图片详细内容  photoInfo.vue
        + 图片缩略图 --> vue.preview
            * 大图的 h w 必须得设置
            * 图片没解决并排显示  无法通过 选择器 来选择标签改变样式  因为 页面加载完 图片还没加载完

#### 绘制商品列表

#### 尝试在手机上进行测试 chrome的dev工具
1. 通过360wifi助手 电脑开启一个热点 手机连接
2. 修改package.json中 --host 为当前主机的ip
3. 手机访问网页 电脑测试---> total control 软件

#### Vue-router中的编程式导航
- 浏览器导航的两种方式：
    + 通过a标签来跳转
    + 通过js代码 window.location.href来实现跳转
- vue-router实现导航 BOM的所有操作
    + 看文档
- 区分route和router

#### 封装轮播图组件
1. 父组件传入 对象数组
2. 由于首页的轮播图 和商品详情的轮播图 的img的宽度 要求不一样
    - 我们给组件的img设置一个类样式 ` .full {width:100%} `
    - 不同的父组件 传入不同的isfull 
    - 根据isfull  来决定是否为img 添加full类样式

#### 点击购买 小球出现 并以动画的形式 滑动到购物车图片
小球动画优化：
问题1：translate 移动的距离 应该随着小球的初始位置 以及 设备的宽度 来动态修改
解决方法： 
1. 得到小球的在页面的 x y
2. 得到购物车图片在页面的 x y 
3. 相减的绝对值就是小球要移动的 x和y
4. 通过domObject.getBoundingClientRect() -->返回矩形对象 四个返回值 分别表示 元素离页面的上 下 左 右 的距离

问题2：没办法 通过设置ref 获得购物车的元素 因为购物车元素 不在该组件中 得通过dom来获取
解决方法:
1. 先给购物车的红色小图标设置id 
2. 在goodsInfo.vue里面通过id来获取元素 而不是依赖于vue

#### 点击 加入购物车  goodsinfo 组件 得先获取 numberBox 组件里面的数据
1. 子组件向父组件传递数据 --> 选中的商品的数量

#### goodsinfo向 numberBox组件传递 商品库存 作为numberBox的最大值
问题1: 商品库存是 异步操作 获取的 也就是 页面渲染完 数据依旧没获取
解决方法： 在numberBox组件里面 通过计算属性值 或者 watch 监听传递过来的max的变化 然后将input的最大值设置为max
> 有点问题 尚未解决  留给未来的自己