vue移动端购物商场首页制作

1.搭建项目框架

新建首页主组件及其子组件并将子组件展示出来

2.封装所需接口

3.编写轮播图组件

<template>

<div id="swipercom">

      <div class="swiper-container" id="swiperIndex">

          <div class="swiper-wrapper">

              <div class="swiper-slide" v-for="(item,i) in imgs" :key="i">

                  <img :src="item.pic" alt="">

              </div>

          </div>

          <!-- 如果需要分页器 -->

          <div class="swiper-pagination"></div>

      </div>

  </div>

</template>

<script>

import 'swiper/css/swiper.css'

import Swiper from 'swiper'

export default {

  name: 'swiperCom',

  data(){

    return{

 imgs:[

        { pic: require("../assets/img/banner2.jpg") },

        { pic: require("../assets/img/banner3.jpg") },

        { pic: require("../assets/img/banner1.gif") },

      ],

    }

    },

    mounted(){//view与model绑定成功之后

        var mySwiper = new Swiper('#swiperIndex',{

            loop: true,

              autoplay: {

                delay: 3000,

                disableOnInteraction: false,

                waitForTransition: false,

            },

            //配置分页器内容

            pagination:{

                el:".swiper-pagination",//分页器与哪个标签关联

                clickable:true//分页器是否可以点击

            }

        })

    }

}

</script>

<style lang="less" scoped>

    #swipercom{

        width: 3rem;

        height: 3.2rem;

    #swiperIndex.swiper-container{

        width: 7.5rem;

        height: 3.2rem;

        // border-radius: 0.1rem;

        .swiper-slide img{

            width: 100%;

        }

        .swiper-pagination-bullet-active{

            background-color: #8d78cd;

        }

    }

    }

    </style>

并通过v-for循环将轮播图片循环展示

4.编写商品分类组件

<template>

  <div class="packge">

    <div class="label">

      <div class="zikuai"></div>

      <span>商品分类</span>

    </div>

    <div class="iconList">

      <div class="iconItem" v-for="(item, i) in hotClass" :key="i" @click="getClass(item.id)">

        <img :src="'http://47.95.13.193/myToiletries' + item.icon" alt="" />

        <span class="count">{{ item.name }}</span>

      </div>

    </div>

  </div>

</template>

<script>

import "swiper/css/swiper.css";

import { getHotClass } from "@/api/index.js";

export default {

  name: "musicList",

  data() {

    return {

      hotClass: [],

      hotCommodity: [],

      imgs: [

      ],

    };

  },

  methods:{

    getClass(id){

          this.$router.push(`/ClassifyView/${id}`)

    }

  },

  async mounted() {

    let res1 = await getHotClass();

    console.log(res1);

    this.hotClass = res1.data.data;

  },

};

</script>

<style lang="less" scoped>

.packge {

  width: 7.5rem;

  padding: 0 0.25rem;

}

.label {

  display: flex;

  margin-top: 0.3rem;

  margin-left: 0.05rem;

}

.zikuai {

  background: #6652ff;

  width: 0.1rem;

  height: 0.4rem;

  margin-right: 0.1rem;

}

.iconList {

  width: 7rem;

  display: flex;

  justify-content: space-between;

  // padding: 0.4rem;

  margin-top: 0.2rem;

  .iconItem {

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

    img {

      width: 1.65rem;

      height: 1.65rem;

      border-radius: 0.1rem;

    }

    span {

      position: absolute;

      right: 0.3rem;

      top: 1.2rem;

      font-size: 0.26rem;

      background: rgba(114, 71, 244, 0.7);

      width: 1rem;

      text-align: center;

      border-radius: 0.1rem;

      color: #fff;

      overflow: hidden;

      height: 0.4rem;

    }

  }

}

</style>

5.编写热门商品页面

<template>

  <div class="packge">

    <div class="label">

      <div class="zikuai"></div>

      <span>热门商品</span>

    </div>

    <div class="iconList">

      <div class="iconItem" v-for="(item, i) in hotCommodity" :key="i">

        <div class="hot"><img src="../assets/img/hot.jpg" alt="" /></div>

        <img :src="'http://47.95.13.193/myToiletries/' + item.photo" alt="" />

        <div class="present">

          <div class="pname">

            <p style="font-size: 0.28rem; width: 4.9rem">

              <strong>{{ item.name }}</strong>

            </p>

          </div>

          <div class="detail">

            <p style="font-size: 0.1rem">{{ item.info }}</p>

          </div>

          <router-link

            class="count"

            :to="{ path: '/shoplist' }"

            @click="change(item.id)"

            style="text-decoration: none"

            >购买</router-link

          >

        </div>

      </div>

    </div>

  </div>

</template>

<script>

import "swiper/css/swiper.css";

import Swiper from "swiper";

import { getHotCommodity } from "@/api/index.js";

import store from "@/store/index.js";

export default {

  name: "hopwares",

  data() {

    return {

      hotCommodity: [],

      imgs: [],

    };

  },

  async mounted() {

    let res2 = await getHotCommodity();

    this.hotCommodity = res2.data.data;

    console.log(res2);

  },

  methods: {

    change(id) {

      store.commit("setplayIndex", id);

    },

  },

};

</script>

<style lang="less" scoped>

.packge {

  width: 7.5rem;

  padding: 0 0.25rem;

}

.label {

  display: flex;

  margin-top: 0.3rem;

  margin-left: 0.05rem;

}

.zikuai {

  background: #6652ff;

  width: 0.1rem;

  height: 0.4rem;

  margin-right: 0.1rem;

}

.iconList {

  width: 7rem;

  display: flex;

  justify-content: space-between;

  // padding: 0.4rem;

  margin-top: 0.2rem;

  display: flex;

  flex-direction: column;

  .iconItem {

    width: 7rem;

    display: flex;

    // flex-direction: column;

    align-items: center;

    position: relative;

    position: relative;

    background: #fff;

    border-bottom: 0.15rem solid #f5f5f5;

    // background: aquamarine;

    .hot {

      position: absolute;

      top: 0rem;

      right: 0.1rem;

      width: 0.5rem;

      height: 0.5rem;

      float: right;

      img {

        width: 0.6rem;

        height: 0.6rem;

      }

    }

    img {

      width: 1.65rem;

      height: 1.65rem;

      //   border-radius:0.1rem ;

      float: left;

    }

    .present {

      width: 5rem;

      .pname {

        width: 5rem;

        // height: 0.6rem;

        // background: yellow;

      }

      .detail {

        width: 5.4rem;

        font-size: 0.02rem;

      }

    }

    .count {

      width: 0.3rem;

      font-size: 0.2rem;

      background: rgba(142, 120, 206);

      width: 1rem;

      text-align: center;

      border-radius: 0.08rem;

      color: #fff;

      margin-left: 0.01rem;

      display: inline-block;

    }

  }

}

</style>

<template>

<div class="iconList">

    <div class="iconItem" @click="$router.push('/')">

      <svg class="icon" aria-hidden="trun">

        <use xlink:href="#icon-zhuye"  class='active1'></use>

      </svg>

      <span class="active1">主页</span>

    </div>

    <div class="iconItem active2" @click="$router.push('/classifyview/1')">

      <svg class="icon" aria-hidden="trun">

        <use xlink:href="#icon-yingyong"></use>

      </svg>

      <span class="active2">分类</span>

    </div>

    <div class="iconItem" @click="$router.push('/search')">

      <svg class="icon" aria-hidden="trun">

        <use xlink:href="#icon-faxian"></use>

      </svg>

      <span>发现</span>

    </div>

    <div class="iconItem" @click="$router.push('/dingdan')">

      <svg class="icon" aria-hidden="trun">

        <use xlink:href="#icon-gouwuche"></use>

      </svg>

      <span>购物车</span>

    </div>

    <div class="iconItem"  @click="$router.push('/me')">

      <svg class="icon" aria-hidden="trun">

        <use xlink:href="#icon-geren"></use>

      </svg>

      <span>个人中心</span>

    </div>

  </div>

</template>

<script>

import "swiper/css/swiper.css";

import Swiper from "swiper";

export default {

  name: "bottom",

       data(){

        return{ }

        },

         methods:{

      leftChange(index) {

              //当前的背景颜色赋给当前点击的索引

             this.changeLeftBackground = index;

       },

         }

}

</script>

<style lang="less" scoped>

.iconList {

    background: #fff;

    position: fixed;

    left: 0;

    bottom: -0.1rem;

  width: 7.5rem;

  height: 1rem;

  display: flex;

  justify-content: space-between;

  padding: 0.2rem;

  .iconItem {

    display: flex;

    flex-direction: column;

    align-items: center;

    .icon {

      width: 0.5rem;

      height: 0.5rem;

      fill: #6f6f6f;

    }

    span {

      font-size: 0.01rem;

    }

  }

}

.active1{

  color:#9285f9;

  fill:#9285f9

}

</style>

巴特西

vue移动端购物商场首页制作

最新文章

热门文章