用vue3+vant4开发的简单小众电商购物项目模板（纯前端）(vant移动端开发)

用vue3+vant4开发的简单小众电商购物项目模板（纯前端） 简单录制如下

推荐整理分享用vue3+vant4开发的简单小众电商购物项目模板（纯前端）(vant移动端开发)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vant 开发app,vue中引入vant组件,vant移动端开发,vue3 vant,vue中引入vant组件,vue-vant,vue中引入vant组件,vue-vant,内容如对您有帮助，希望把文章链接给更多的朋友！

主要练习下界面和交互，顺带简单了解下 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>

简单记录，（完）😀