vue商城项目简介（用vue3+vant4开发的简单小众电商购物项目模板（纯前端））

简单录制如下

主要练习下界面和交互  
  
  
  
  
  
  
 ，顺带简单了解下 vue3 语法               。

简单截图如下

首页

首页-猜你喜欢

分类

购物车

个人页面

部分文件代码

底部导航文件

<template> <div class="nav" id="myNav"> <div class="nav-item-box" v-for="(item,index) in itemArr" :key="index" > <!-- :class="item.title == 书架 ? bookshelf_nav : " --> <div class="nav-item" :style="name == item.navName ? color:rgb(255,63,63) : " @click="to(item.navName)" > <div class="icon"> <i :class="item.icon"></i> </div> <div class="title">{{item.title}}</div> </div> </div> </div> </template> <script> /* eslint-disable */ import { defineComponent, ref, computed } from vue import { useRouter,useRoute } from vue-router export default defineComponent({ setup() { let itemArr = ref([ { title: 首页, navName: Index, icon: iconfont icon-shouye }, { title: 分类, navName: Classification, icon: iconfont icon-fenlei}, { title: 购物车, navName: ShoppingCart, icon: iconfont icon-gouwuche }, { title: 我的, navName: Mine, icon: iconfont icon-wode }, ]) let router = useRouter() // 全局路由对象 let route = useRoute() // 当前路由对象 let name = computed(() =>{ return route.name }) let to = (val) =>{ if (val != name.value){ router.replace({ name: val }) } } return { itemArr, name, to } } }) </script>

分类功能模块

<div class="content_container"> <!-- 左侧 --> <div class="left_box"> <div v-for="(item,index) in leftList" :key="index"> <div :class="curNav.index == item.index ? active : " class="left_box_title" @click="changeIndex(index)">{{item.title}}</div> </div> </div> <!-- 右侧 --> <div> <van-list v-if="curNav.index ==0" class="right_box" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <div v-for="item in list" :key="item" class="right_good"> <div class="img "><img class="img" :src="item.src" alt=""></div> <div class="name">{{item.title}}</div> </div> </van-list> <div v-if="curNav.index !=0"> <van-empty image="error" description="暂无数据" /> </div> </div> </div> <script> /* eslint-disable */ import { defineComponent, ref } from vue import { showToast } from vant; import navCom from @/components/onlineRetailer/MyNav.vue export default defineComponent({ name: headerCom, components: { navCom }, setup (props,ctx) { let value = ref() let active = ref(0); // let onChange = (index) => showToast(`标签名 ${index + 1}`); // let onChange = (index) => { // switch(index){ // case 0: showToast(1111111111111) // break; // case 1: showToast(222222222222) // break; // default: showToast(6666666666666) // } // } let leftList = ref([ { index: 0, title: "好货推荐" }, { index: 1, title: "彩妆个护" }, { index: 2, title: "食品饮料" }, { index: 3, title: "鞋履箱包" }, { index: 4, title: "母婴用品" }, { index: 5, title: "生活家居" } ]) let rightList = ref([ { title: 麦菜 }, { title: 芥兰 } ]) let list = ref([ { title: 坚定不移, src: require(@/assets/newProducts/2.jpg)}, { title: 壮志凌云, src: require(@/assets/newProducts/1.jpg)}, { title: 奋发图强, src: require(@/assets/newProducts/3.jpg)}, { title: 坚持不懈, src: require(@/assets/newProducts/4.jpg)}, { title: 朝气蓬勃, src: require(@/assets/newProducts/5.jpg)}, { title: 力争上游, src: require(@/assets/newProducts/6.jpg)}, { title: 坚定不移, src: require(@/assets/newProducts/2.jpg)}, { title: 壮志凌云, src: require(@/assets/newProducts/1.jpg)}, ]); let loading = ref(false); let finished = ref(false); let curNav = ref({ index: 0, }) let changeIndex = (index) =>{ curNav.value.index = index } let onLoad = () => { // 异步更新数据 // setTimeout 仅做示例 
  
  
  
  
  
  
  ，真实场景中一般为 ajax 请求 // setTimeout(() => { // for (let i = 0; i < 6; i++) { // list.value.push(list.value.length + 1); // } // 加载状态结束 loading.value = false; console.log(list.value.length,list.value.length) // 数据全部加载完成 if (list.value.length >= 20) { finished.value = true; } // }, 1000); }; return { value, active, // onChange, leftList, rightList, list, onLoad, loading, finished, curNav, changeIndex } } }) </script>

简单记录


 


 


 


 


 


 


 

，（完）😀