vue移動端購物商場首頁製作
阿新 • • 發佈:2022-05-09
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' exportdefault { 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>