关于详情页的具*作

我们此步实现的是,在主页里面点击下列商品的时候,是可以跳转到详情页并携带iid,那么接下来记录下具体的一些思路。

首先,在商品详情的组件当中添加一个事件监听事件,之后,在这个事件当中,实现跳转到详情页。

详情页的话,我直接添加了一个路由,方便之后的操作,根据观察api,可知每个商品的iid是不一样的,因此我们使用了动态路由。

首先,在index.js中添加下面语句:

const detail =()=> import('../../views/detail/detail')
Vue.use(Router)
const routes=[
  {path:'/detail/:iid',
  component:detail}
]
const router=new Router({
    routes,
    mode:"history"
})
export default router

goodsitem里面所添加的具体内容如下:

首先,在<template>模板的根元素上的处理:

<div class="goodsitem" @click="itemclick">

在methods里面的添加:

<script>
export default {
name: "goodsitem",
  props:{
  goodsitem: {
    type:Object,
    default(){
      return{}
    }
  }
  },
methods:{
  imageload(){
    this.$bus.$emit("itemimageload")
  },
  itemclick(){
    this.$router.push('./detail/'+this.goodsitem.iid)
  }
}
}
</script>

然后,对detail.vue做出以下处理:

data() {
    return {
      iid: null
    }
  },
 created() {
    // console.log(this.$route.params.iid)
    this.iid = this.$route.params.iid
  }

那下面的话,我们来实现下详情页的导航栏的制作。之前,在做home首页的时候,封装了一个navbar组件,那么接下来可以直接拿过来进行一定的修改,来达成以下效果:

关于详情页的具*作

由于我之前的封装,是设置了三个具名插槽:

<template>
  <div class="navbar">
    <div class="left"><slot name="left"></slot></div>
    <div class="center"><slot name="center"></slot></div>
   <div class="right"><slot name="right"></slot></div>
  </div>
</template>

可以把这个进行一定的修改,用进详情页的导航栏中。

我们可以再封装一个detailnav组件,具体写法如下:

<template>
  <div>
    <navbar>
      <div slot="left" class="left" @click="backclick">
        <img src="../../../src/assets/img/back.svg">
      </div>
      <div slot="center" class="title">
        <div v-for="(item,index) in title"
             class="aaa" :class="{active:index === currentIndex}" v-on:click="itemclick(index)">
          {{item}}
        </div>
      </div>
    </navbar>
  </div>
</template>

<script>
import Navbar from "../../../src/components/common/navbar/navbar";
export default {
  name: "detailnav",
  components: {Navbar},
  data(){
    return{
      title:['商品','参数','讨论','推荐'],
      currentIndex:0
    }
  },
  methods:{
    itemclick(index){
      this.currentIndex = index
    },
    backclick(){
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.title{
  display: flex;
  font-size: 13px;
}
.aaa{
  flex: 1;
}
.active{
  color: greenyellow;
}
.left img{
  margin-top: 10px;
}
</style>

首先,导入navbar。因为,详情页要实现的是,四个选择项,那么我们可以把这四个选项,先存放在data当中,此代码中,名为title的数组。先使用其center插槽,进行一定的操作,在其中遍历title数组中的每一个元素,这样的话即可显示出四个选项。这样写之后,显示出来的四个选项为纵向排列,那么我们在类中设置其display为flex,并将flex设置为1,实现横向平均分布。之后,为了实现,点击某选项,便会变色。那么,我们先在data当中设置一个currentIndex为0,之后在其中实现一个监听。监听代码中的itemclick事件,我们先用v-bind绑定一个类,在这个类里面我们去设置文字被点中后所需要他变的颜色,之后在methods中处理,this.currentIndex = index,当index ===  currentIndex的时候,便会显示出相应的颜色。在这里的话,四个选项以及点中显示为黄绿色已经做完了。

那么接下来,还有最后一个功能实现,即为点击左上角的箭头,便可返回主页。

则,先在为left的具名插槽中添加箭头的图片。在此插槽当中事件监听一个backclick,backclick中实现路由跳转的话,直接显示this.$router.back(),即可跳回主页。

之后,就是在detail.vue中,直接import且注册detailnav组件,且在<template>组件中,添加这个组件的标签即可。

那么接下来,我们即来实现详情页的轮播图,之前在主页当中已经写过轮播组件了。那么目前最主要的即是,取到每次需要展示的图片。

关于详情页的具*作

首先,现在网络请求模块部分的文件里增加一个,detail.js文件,具体显示如下:

import {request} from './request'

export function getdetails(iid){
  return request({
    url:"detail",
    params:{
      iid
    }
  })
}

之后,我们在detail.vue中进行如下操作:

import {getdetails} from "../../network/detail";
export default {
 
  data() {
    return {
      iid: null,
      topImages: []
    }
  },
  created() {
    // console.log(this.$route.params.iid)
    this.iid = this.$route.params.iid
    getdetails(this.iid).then(res => {
      console.log(res);
      const big =res.data.result;
      this.topImages = big.itemInfo.topImages
      console.log(this.topImages)
    })
    // activated() {
    //   this.iid = this.$route.params.iid
    //   console.log(this.$route.params.iid)
 //const big =res.data.result;
    //  this.topImages = big.itemInfo.topImages
    //
    //   })
    // }
  }
}
</script>

这里我们有个地方需要注意,因为之前写首页的时候,我用<keep-alive>包裹了<router-view/>,因此,如果不添加任何的话,这边的created会一直存在一直存在,而不会消亡,会导致出点击商品A的时候的轮播图,而在点击商品B的时候依旧出现的是商品A的轮播图。因此,有两个办法。1.写入activated函数当中。第二种,在app.vue中的<keep-alive>中添加exclude并添加其路由名。此处便为,<keep-alive exclude='detail'>(路由名)即可。之后,再次封装一个detailswiper组件,实现如下代码:

<template>
<swiper>
  <swiperitem   class="tiny" v-for="item in topImages">
    <img :src="item">
  </swiperitem>
</swiper>
</template>

<script>
import swiper from "../../../src/components/common/swiper/swiper";
import swiperitem from "../../../src/components/common/swiper/swiperitem";
export default {
  name: "detailswiper",
  components:{swiperitem,swiper},
  props:['topImages']
}
</script>

<style scoped>
.tiny{
  height: 300px;
  overflow-y: hidden;
}
</style>

这样即完成了,轮播与navbar与点击商品出现详情页的操作。

 

上一篇:分布式文件存储介绍、选型比较、架构设计


下一篇:如何从非独立同分布数据中学习?