VUE笔记--详情页跳转以及制作

详情页跳转以及制作

1.详情页跳转

利用router来进行页面的跳转，配置详情页的路由，eg：/detail:iid
从首页获取到每个小goodsitem的iid，从而跳转到其相应的详情页，进而获得相应的详情信息。

2.Bug1 解决从其他页面返回到首页，保存首页的停留位置

查看在整个app中有没有使用keep-alive
设置一个变量y值，通过钩子函数activated（）和deactivated（）两个方法来记录和重新设置回到首页的y值。注意：y=this.$refs.scroll.getScrollY()

3.详情页导航栏制作

1.在detail文件夹中封装一个子文件夹，用于放后续的子组件。
2.创建一个DetailNavBar的子组件，导入先前的NavBar组件，向插槽中添加要加入的导航信息
3.给导航栏设置两个监听。一是对于返回按钮，点击后调用 this.$router.back();
而是对于文字，监听点击到后文字颜色变红。

4.请求详情页的数据

1.设置网络请求

import {
    
     request } from './request'


export function getDetailData(iid) {
    
    
    return request({
    
    
        url: '/detail',
        params: {
    
    
            iid
        }
    })
}

2.通过this.$route.params.iid来请求其中的数据

5.bug2 - 【解决】详情页只请求原来的一份数据

因为在全局添加了keep-alive，所以导致这个问题的存在。
解决办法就是使Detail解除keep-alive的模式，使用exclude=“Detail”

6.建立各种子组件，一步步把数据请求到页面中

在这里插入图片描述
如果子组件需要传入的信息太多，可以通过创建一个类存储，转收数据。

7.时间戳转换

1.导入Date的格式化方法

import {
    
    formatDate} from "../../../common/utils"

2.使用过滤器对时间戳进行处理

 filters: {
    
    
      showDate(value){
    
    
        //   1.将时间戳转化为date对象
        const date = new Date(value*1000)

        // 2.将date进行格式化
        return formatDate(date,"yyyy-MM-dd")
      }
  }

mixin用法

由于better-scorll而引起的，图片滚动bug在详情页也会出现。
就要使用对于图片加载的监听方式，
这里就采用，当离开home页面的时候取消调用refresh（），
进入详情页的时候再调用，反之亦然。

先设置一个变量itemImgListener，然后
在生命周期函数中

 mounted() {
    
    
   // 1.监听item中图片加载事件
   let newRefresh = debounce(this.$refs.scroll.refresh, 100);
   // 2.对监听的事件进行保存
    this.itemImgListener = () => {
    
    
       newRefresh();
     };
    this.$bus.$on("itemImageLoad", this.itemImgListener);
  },

//通过destroyed或者deactivated进行全局监听的取消
destroyed() {
    
    
    this.$bus.$off("itemImageLoad", this.itemImgListener);
  },

这是由于部分代码的重复，home和detial需要用到重复的代码，就可以创建一个mixin.js文件，抽离出重复的部分然后导出调用：

import {
    
     debounce } from "./utils";


export const itemListenerMixin = {
    
    
    data () {
    
    
        return {
    
    
            itemImgListener:null
        }
    },
    mounted() {
    
    
        let newRefresh = debounce(this.$refs.scroll.refresh, 100);
    
        this.itemImgListener = () => {
    
    
          newRefresh(20, 30, "abc");
        };
        this.$bus.$on("itemImageLoad", this.itemImgListener);
      },
}

更多mixin知识：https://cn.vuejs.org/v2/api/#Vue-mixin

点击标题跳转相应页面

在这里插入图片描述
通过获取到的offsettop，进行监听滚动

 this.$refs.scroll.scrollTo(0, -this.themeTopYs[index] + 50, 200);

滚动内容显示对应标题

首先先对滚动进行监听，然后让滚动的y值与每个类别的offsettop作比较，运用for当在某个区间内的时候就改变标题组件中的currentindex值。

点击购物车加入商品

原理：通过vuex进行记录。
点击购物车，获得这个商品的相关信息，然后存到vuex数组中，然后在action（）方法中判断，如果是点击当前的商品，则数量加一，如果不是，给相应商品数量加一，如果都不是，闯进新的商品，数量为一。

使用getters来获得vuex中index.js的信息（将计算属性存储到getters中）

1.创建getters.js,以及索要获取的信息

export default{
    
    
    cartLength(state){
    
    
        return state.cartList.length
    },
    cartList(state){
    
    
        return state.cartList
    }
}

2.index中导入getters，然后在购物车组件中导入{mapGetters}的vuex组件
并使用

 computed: {
    
    
    ...mapGetters({
    
    
      length:'cartLength',
      list:'cartList'
    })
  }

Vuex-actions返回Promise-mapActions

如果我们不想通过从store中去出方法时，比如这样取出actions中的addCart方法：

this.$store.dispatch("addCart", product).then(res => {
    
    });

我们可以通过vuex中的mapActions，来直接调用这个方法。
首先导入{mapActions}
之后，在方法中注册，后使用

methods:{
    
    
...mapActions:(['addCart'])

  // 2.将商品添加到购物车里
  this.addCart(product).then(res => {
    
    
   this.$toast.show(res,1500)
   });
}

关于toast的使用

传统方法：

创建toast组件，在父组件中导入，注册，调用。
传入显示的文本信息，和是否显示的布尔信息。
在产品成功加入购物车或者点击结算商品时改变show的布尔值

封装方法：将toast当做插件注册到vue中。

1.在main.js中注册

import toast from './components/common/toast/index'
// 安装toast
Vue.use(toast)

在toast文件夹中创建index的js文件

import Toast from "./Toast.vue"

const obj = {
    
    }
obj.install = function(Vue){
    
    
// 1.创建组件构造器
const toastContrustor = Vue.extend(Toast)

// 2.通过new组件构造器，创建组件
const toast = new toastContrustor()

// 3.将创建好的对象，手动挂载到一个元素上
toast.$mount(document.createElement('div'))

// 4.toast.$el就是上面的div
document.body.appendChild(toast.$el)

    Vue.prototype.$toast = toast;
}
export default obj

3.在Toast组件中直接写入show方法

  methods: {
    
    
    show(message, duration=2000) {
    
    
      this.isShow = true;
      this.message = message;

      setTimeout(() => {
    
    
        this.isShow = false;
        this.message = "";
      }, duration);
    }
  }

4.需要使用toast时只需要在相应地方调用toast，并使用其中的方法。

 this.$toast.show(res,1500)

补充一些细节

1.fastclick减少300ms移动端点击延迟

使用方法：
1.npm install fastclick --save 安装fastclick
2.在main文件中导入
3.调用fastclick的attach（）方法

2.图片懒加载：vue-lazyload

使用方法：
1.npm安装
2.main.js中导入
3.Vue.use()中安装
4.修改对应img：src为v-lazy：src

同时也可以设置其他的属性
在这里插入图片描述