用vue3+vant4开发的简单小众电商购物项目模板（纯前端）
简单录制如下
主要练习下界面和交互，顺带简单了解下 vue3 语法。
简单截图如下
首页
首页-猜你喜欢
分类
购物车
个人页面
部分文件代码
底部导航文件
<template><div class="nav" id="myNav"><divclass="nav-item-box"v-for="(item,index) in itemArr":key="index"><!-- :class="item.title == '书架' ? 'bookshelf_nav' : ''" --><divclass="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-listv-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>简单记录，（完）
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ... HTML5期末大作业:电商网站设计--仿品优购 (毕业设计含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计 ... 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ... 在当下的网络营销市场中,电商购物网站之间的竞争还是很激烈的,各行各业的企业纷纷掺入其中,这势必会为当下的营销市场带来混乱且持久的战役.而在如此激烈的购物网站市场竞争中,如果想要做出改变就要懂得购物网站 ... 基于Vue开发的电商APP项目--蘑菇街 项目源码:https://github.com/Limna777/Shopmall.git 1.项目描述 2.使用的插件或第三方库 3.页面主要实现的功能 1 ... HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板 文章目录 HTML5期末大作业:电商购物网站设计- ... HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学 ...用vue3+vant4开发的简单小众电商购物项目模板（纯前端）相关推荐
最新文章
热门文章