位置: IT常识 - 正文

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

编辑:rootadmin
用vue3+vant4开发的简单小众电商购物项目模板(纯前端) 简单录制如下

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

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

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

简单截图如下

首页

首页-猜你喜欢

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

分类

购物车

个人页面

部分文件代码

底部导航文件

<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>

简单记录,(完)😀

本文链接地址:https://www.jiuchutong.com/zhishi/283197.html 转载请保留说明!

上一篇:windows不能打开帮助和支持怎么办(windows不能打开exe文件)

下一篇:Win11 Build 22483预览版ISO官方镜像下载(win11 build 22000.65)

  • procreate笔刷怎么分组(procreate笔刷怎么导入ps)

    procreate笔刷怎么分组(procreate笔刷怎么导入ps)

  • oppo手机其它存储怎么清理(oppo手机其它存储是缓存吗)

    oppo手机其它存储怎么清理(oppo手机其它存储是缓存吗)

  • ipad充一夜可以吗(ipad充了一夜没事吧)

    ipad充一夜可以吗(ipad充了一夜没事吧)

  • 定位精灵打开应用怎么老闪退(定位精灵打开应用闪退)

    定位精灵打开应用怎么老闪退(定位精灵打开应用闪退)

  • 米家设备连接网络超时(米家设备连接网络超时 服务器连接失败)

    米家设备连接网络超时(米家设备连接网络超时 服务器连接失败)

  • 电脑主页图标没有了怎么办(电脑主界面没有图标)

    电脑主页图标没有了怎么办(电脑主界面没有图标)

  • 机械硬盘当移动硬盘的弊端(机械硬盘当移动硬盘用怎么分区)

    机械硬盘当移动硬盘的弊端(机械硬盘当移动硬盘用怎么分区)

  • boss账号被锁定了多久才能解封(boss账号被锁定能申诉回来吗)

    boss账号被锁定了多久才能解封(boss账号被锁定能申诉回来吗)

  • 剪映怎么更新不了本地音乐(剪映app更新)

    剪映怎么更新不了本地音乐(剪映app更新)

  • 苹果id都能查出什么(苹果id能查什么)

    苹果id都能查出什么(苹果id能查什么)

  • 腾讯微云vip是干啥的(腾讯微云永久会员)

    腾讯微云vip是干啥的(腾讯微云永久会员)

  • 华为演示机和真机有什么区别(华为演示机和真机哪个好用些)

    华为演示机和真机有什么区别(华为演示机和真机哪个好用些)

  • 华为平板m5能插u盘吗(华为平板m5能插卡吗)

    华为平板m5能插u盘吗(华为平板m5能插卡吗)

  • 手机上的指纹锁怎样设置(手机上的指纹锁怎么搞)

    手机上的指纹锁怎样设置(手机上的指纹锁怎么搞)

  • 手机qq怎么拒绝加好友(手机qq怎么拒绝添加好友申请)

    手机qq怎么拒绝加好友(手机qq怎么拒绝添加好友申请)

  • 手机游戏obb文件放哪(obb游戏数据包放哪里)

    手机游戏obb文件放哪(obb游戏数据包放哪里)

  • vivos1带红外遥控吗(vivos9有红外遥控)

    vivos1带红外遥控吗(vivos9有红外遥控)

  • 看资料卡有访客记录吗(qq访问资料卡会有访问记录吗)

    看资料卡有访客记录吗(qq访问资料卡会有访问记录吗)

  • ipad商店登录不上(ipad商店登录不上去)

    ipad商店登录不上(ipad商店登录不上去)

  • hp打印机碳粉盒怎么装(hp打印机碳粉盒区域出现卡塞)

    hp打印机碳粉盒怎么装(hp打印机碳粉盒区域出现卡塞)

  • 合同书下划线怎么打(合同书下划线怎么弄)

    合同书下划线怎么打(合同书下划线怎么弄)

  • 顺风车下线后怎么坐顺风车(顺风车下线后怎么接单子)

    顺风车下线后怎么坐顺风车(顺风车下线后怎么接单子)

  • 磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单(新的磁贴)

    磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单(新的磁贴)

  • 什么是跨域?及7种跨域解决方法(什么是跨域以及解决方法)

    什么是跨域?及7种跨域解决方法(什么是跨域以及解决方法)

  • 用于员工福利的进项税转出分录
  • 耕地占用税税率变化历程
  • 收到社保局退回的社保费
  • 内账会计会承担法律责任吗
  • 销项减进项余额在哪方
  • 工程施工的借方和贷方
  • 公司车辆卖给个人怎么处理账务
  • 房地产开发企业土地增值税清算
  • 销售免税货物如何开票
  • 跨年度借款利息的税务处理怎么做?
  • 以固定资产换入原材料
  • 费用跨年入账所得怎么算
  • 收到外国客户的祝福怎么回复
  • 地税都包括什么
  • 发票付款证明怎么写
  • 建筑公司资源税的征税
  • 房地产企业回迁房税收规定
  • 委托代销商品按什么确认收入
  • 外币业务汇兑损益根据业务划分为
  • 买办公用品花了100元如何做会计分录
  • 退休职员工伤补助金放哪个科目?
  • 工商年报财务数据怎么填
  • 损益类科目在期末均需转入什么科目
  • 抵押物转让的法律规定
  • 怎样查一个银行的行号
  • 土地增值税清算收入如何确定
  • mis.off c n
  • yolov3与yolov2
  • php 分页
  • 公司法人变更后银行账户怎么变更
  • 什么的利息收入可免纳个人所得税
  • monolog php
  • vue使用scss报错
  • javaweb项目开发的原理
  • 联邦学习(FL)+差分隐私(DP)
  • vue-axios详细介绍
  • 基于stm32f103c8t6的毕业设计
  • 蓝桥杯官网报名2020
  • 基于ansible的运维平台
  • sysstat命令
  • 转账不同银行同城转账手续费多少
  • 生产过程报废和返工产生的成本
  • 合同 成本
  • rabbitmq work queue
  • 同一控制下企业合并发生的审计费用计入
  • 农产品来源用途是什么
  • 利润是非限定净现值吗
  • sql 字符串
  • 异地成立分公司的流程和要求
  • 流转税怎么核算
  • 材料采购的流程
  • 出售其他权益工具投资其他综合收益
  • 减值损失对公司有哪些影响
  • 进项税额转出之后怎么处理
  • 住宿费专用发票会计分录
  • 定期存款放入哪个会计科目
  • 住宿发票没有写天数
  • 工资计入会计科目
  • 应付票据在资产负债表怎么填列
  • 案例分析应收账款管理存在的问题
  • SQLServer XML查询快速入门(18句话)
  • 简述操作系统更新设置方法
  • 重装win7系统后鼠标键盘不能用
  • win8如何禁止电脑自动安装软件
  • visual studio 无法编译
  • ecmascript6入门
  • python for key in
  • perl怎么读取文件
  • shell脚本符号
  • Web2.0下XHTML+CSS 设计需要注意的地方小结
  • 插入排序_Python与PHP的实现版(推荐)
  • 深入浅出python
  • jqgrid分页pager
  • javascript的对象
  • 安徽国税app
  • 银行赠送礼品活动方案
  • 江苏税务社保缴纳查询缴费记录
  • 地方税务局网上申报
  • 成都暖气费补贴
  • 开电子发票流程步骤
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设