• 关于详情页的具体制作(一)


    我们此步实现的是,在主页里面点击下列商品的时候,是可以跳转到详情页并携带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与点击商品出现详情页的操作。

  • 相关阅读:
    SCU 4439 Vertex Cover|最小点覆盖
    SCU 4438 Censor|KMP变形题
    BZOJ 2152: 聪聪可可|点分治
    暑假集训-8.18总结
    AcWing 252. 树|点分治
    Proj THUDBFuzz Paper Reading: Field-aware Evolutionary Fuzzing Based on Input Specifications and Vulnerablity Metrics
    Proj THUDBFuzz Paper Reading: Semantic Fuzzing with Zest
    Proj THUDBFuzz Paper Reading: Smart Greybox Fuzzing
    Proj THUDBFuzz Paper Reading: Language-Agnostic Generation of Compilable Test Programs
    Proj THUDBFuzz Paper Reading: Fuzzing JS Engines with Aspect-preserving Mutation
  • 原文地址:https://www.cnblogs.com/ljylearnsmore/p/14243006.html
Copyright © 2020-2023  润新知