day03-vuejs项目-商城（3）

发表评论

1. 把文本框做双向数据绑定
2. 为发表按钮绑定一个事件
3. 校验评论内容是否为空，如果为空，则Toast提示用户 评论内容不能为空
4. 通过 vue-resource 发送一个请求，把评论内容提交给 服务器
5. 当发表评论OK后，重新刷新列表，以查看最新的评论

• 如果调用 getComments 方法重新刷新评论列表的话，可能只能得到 最后一页的评论，前几页的评论获取不到
• 换一种思路： 当评论成功后，在客户端，手动拼接出一个 最新的评论对象，然后 调用 数组的 unshift 方法， 把最新的评论，追加到 data 中 comments 的开头；这样，就能 完美实现刷新评论列表的需求；

  发表评论
     // 参数1： 请求的URL地址
     // 参数2： 提交给服务器的数据对象 { content: this.msg }
     // 参数3： 定义提交时候，表单中数据的格式  { emulateJSON:true }
     this.$http
       .post("api/postcomment/" + this.$route.params.id, {
         content: this.msg.trim()
       })
       .then(function(result) {
         if (result.body.status === 0) {
           // 1. 拼接出一个评论对象
           var cmt = {
             user_name: "匿名用户",
             add_time: Date.now(),
             content: this.msg.trim()
           };
           this.comments.unshift(cmt);
           this.msg = "";
         }
       });

改造图片分析 按钮为 路由的链接并显示对应的组件页面:

            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
              <img src="../../images/menu2.png" alt="">
              <div class="mui-media-body">图片分享</div></router-link></li>

绘制 图片列表 组件页面结构并美化样式

1. 制作 顶部的滑动条
   tab-top-webview-main.html
2. 制作 底部的图片列表

制作顶部滑动条的坑们：

1. 需要借助于 MUI 中的 tab-top-webview-main.html
2. 需要把 slider 区域的 mui-fullscreen 类去掉
3. 滑动条无法正常触发滑动，通过检查官方文档，发现这是JS组件，需要被初始化一下：

• 导入 mui.js
• 调用官方提供的 方式 去初始化：

mui('.mui-scroll-wrapper').scroll({
  deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});

4. 我们在初始化 滑动条 的时候，导入的 mui.js ，但是，控制台报错： Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode

• 经过我们合理的推测，觉得，可能是 mui.js 中用到了 'caller', 'callee', and 'arguments' 东西，但是， webpack 打包好的 bundle.js 中，默认是启用严格模式的，所以，这两者冲突了；
• 解决方案：

1. 把 mui.js 中的 非严格 模式的代码改掉；但是不现实；
2. 把 webpack 打包时候的严格模式禁用掉；
   2的步奏：
   (官网)https://github.com/genify/babel-plugin-transform-remove-strict-mode

• 1.npm install babel-plugin-transform-remove-strict-mode
  2.在babelrc加入代码：

{
  "plugins": ["transform-remove-strict-mode"]
}

• 最终，我们选择了 plan B 移除严格模式： 使用这个插件 babel-plugin-transform-remove-strict-mode

5. 刚进入 图片分享页面的时候， 滑动条无法正常工作， 经过分析，发现， 如果要初始化 滑动条，必须要等 DOM 元素加载完毕，所以，我们把 初始化 滑动条 的代码，搬到了 mounted 生命周期函数中；
6. 当 滑动条 调试OK后，发现， tabbar 无法正常工作了，这时候，我们需要把 每个 tabbar 按钮的 样式中 mui-tab-item 重新改一下名字；
7. 获取所有分类，并渲染 分类列表；

Lazy load
图片懒加载指令。

引入
import { Lazyload } from 'mint-ui';

Vue.use(Lazyload);
例子
为 img 元素添加 v-lazy 指令，指令的值为图片的地址。同时需要设置图片在加载时的样式。

<ul>
  <li v-for="item in list">
    <img v-lazy="item">
  </li>
</ul>
image[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}
若列表不在 window 上滚动，则需要将被滚动元素的 id 属性以修饰符的形式传递给 v-lazy 指令

<div id="container">
  <ul>
    <li v-for="item in list">
      <img v-lazy.container="item">
    </li>
  </ul>
</div>

制作图片列表区域

1. 图片列表需要使用懒加载技术，我们可以使用 Mint-UI 提供的现成的 组件 lazy-load
2. 根据lazy-load的使用文档，尝试使用
3. 渲染图片列表数据

实现了 图片列表的 懒加载改造和 样式美化

实现了 点击图片 跳转到 图片详情页面

1. 在改造 li 成 router-link 的时候，需要使用 tag 属性指定要渲染为 哪种元素

实现 详情页面的布局和美化，同时获取数据渲染页面

实现 图片详情中 缩略图的功能

1. 使用 插件 vue-preview 这个缩略图插件
2. 获取到所有的图片列表，然后使用 v-for 指令渲染数据
3. 注意： img标签上的class不能去掉
4. 注意： 每个 图片数据对象中，必须有 w 和 h 属性

## Installation

```source-shell
npm i vue-preview -S

Usage

Notice:

• This plugin currently support vue2.5 and above

Install plugin

import VuePreview from 'vue-preview'

// defalut install
Vue.use(VuePreview)

// with parameters install
Vue.use(preview, {
  mainClass: 'pswp--minimal--dark',
  barsSize: {top: 0, bottom: 0},
  captionEl: false,
  fullscreenEl: false,
  shareEl: false,
  bgOpacity: 0.85,
  tapToClose: true,
  tapToToggleControls: false
})

Examples

<template>
  <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
</template>

<script>
export default {
    data () {
      return {
        slide1: [
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
          }
        ]
      }
    },
    methods: {
      handleClose () {
        console.log('close event')
      }
    }
  }
</script>

绘制 商品列表 页面基本结构并美化

flex布局：

<style lang="scss" scoped>
.goods-list{
  display: flex;
  flex-wrap: wrap;
  padding: 7px;
  justify-content: space-between;

  .goods-item{
    width: 49%;
    border: 1px solid #ccc;
    box-shadow: 0 0 8px #ccc;
    margin: 4px 0;
    padding: 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 293px;
    img{
      width: 100%;
    }
    .title{
      font-size: 14px;
    }

    .info{
      background-color: #eee;
      p{
        margin: 0;
        padding: 5px;
      }
      .price{
        .now{
          color: red;
          font-weight: bold;
          font-size: 16px;
        }
        .old{
          text-decoration: line-through;
          font-size: 12px;
          margin-left: 10px;
        }
      }
      .sell{
        display: flex;
        justify-content: space-between;
        font-size: 13px;
      }
    }
  }
}
</style>

尝试在手机上 去进行项目的预览和测试

1. 要保证自己的手机可以正常运行；
2. 要保证 手机 和 开发项目的电脑 处于同一个 WIFI 环境中，也就是说 手机 可以 访问到 电脑的 IP
3. 打开自己的 项目中 package.json 文件，在 dev 脚本中，添加一个 --host 指令， 把 当前 电脑的 WIFI IP地址， 设置为 --host 的指令值；

• 如何查看自己电脑所处 WIFI 的IP呢， 在 cmd 终端中运行 ipconfig ， 查看 无线网的 ip 地址