【项目记录】用vue-h5写可前后端分离和控制计时的物联网移动端app

要是以前学过vue的话用于二次开发还是很方便的~
先上效果：

其中在点击按钮之后可以进入计时，且圆形的进度条将动态变化：

其他功能模块：

使用的组件有：走马灯，底部导航，elementui和iview库，卡片式单元

记录几个页面代码：
底部导航：

<template><div id="foot_menu"><tabbar v-model="index"><tabbar-item :link="item.link" ref="indexTab" v-for="(item,index) in menuData" v-bind:key="item.link"><img slot="icon" :src="item.icon"><span slot="label">{{item.name}}</span></tabbar-item></tabbar></div>
</template><script>import { Tabbar, TabbarItem } from 'vux'import * as types from '../../store/types'export default {components: {Tabbar,TabbarItem},data() {return {menuData: this.getMenuData(),index: this.selectIndex()}},methods: {getMenuData() {if (types.PRODUCT === types.PRODUCT_OFFICIAL_SITE) {return types.MENU_DATA_OFFICIAL_SITE}if (types.PRODUCT === types.PRODUCT_BBS) {return types.MENU_DATA_BBS}},selectIndex() {const menuData = this.getMenuData()for (let i = 0; i < menuData.length; i++) {if (this.$route.path.indexOf(menuData[i].link) > -1) {return i}}return 0;}}}
</script>

主页：

<template><div><div><x-header title="Intelligent Wash" :left-options="{showBack: false}"></x-header><menuGroup></menuGroup><Card style="width:340px; margin-left:10px"><div style="text-align:center"><img src="../../../static/m6.png" style="width: 50px;height: 50px;"><h3> <strong>为洁净餐具 节约能源而生</strong></h3></div></Card><br><br><el-button type="warning" @click.native="gettime()" style="margin-left: 130px"><i class="el-icon-video-play
"></i> 开始洗涤</el-button><div style="font-size: x-large; color: #00FFFF;">
<i class="el-icon-alarm-clock"></i>您清洗的总时间（按分钟计）:<div ref="startTimer"></div>
<el-progress type="circle" :percentage="total" status="success" style="margin-left: 100px;"></el-progress>
</div>
</div><img src="../../../static/images/wa0.png"  ><group-title>{{title}}</group-title><footer class="footer_section"><div class="container"><p style="color: #660000;">Copyright &copy; 2021.Intelligent Wash团队rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/"></a></p></div></footer><footMenu ></footMenu></div>
</template>
<script src="./index.js"></script><style scoped>.logo{margin-top:0px;text-align: center;font-size:.8rem;}.logo>img{width:100%;}.about{margin:20px;text-align: center;}
</style>

主页js代码：

import {XHeader, TransferDom, Panel, Swiper, SwiperItem, GroupTitle} from 'vux'
import footMenu from '../../components/footer/footMenu'
import menuGroup from '../../components/menu/menuGroup'import api from '../../fetch/api'
import {getApiUrl} from '../../util/tool'export default {components: {XHeader,TransferDom, footMenu, Panel, Swiper, SwiperItem, menuGroup, productList, GroupTitle},data () {return {newsList: [],banner: {},timer: "",hour: 0,total:0,minutes: 0,seconds: 0,}},mounted () {this.init()},methods: {init () {this.banner.list = ['../../../static/images/wa0.png','../../../static/images/wa1.png','../../../static/images/wa2.png']this.newsList = res.data.data.newsList},bannerChange (index) {this.banner.index = index},onItemClick (index) {this.getTopics(this.tabData[index].key)},getMethod(){this.$message({showClose: true,message: '您已经提交成功，我们将及时联系您！',type: 'success'});document.getElementById("biao").reset()},startTimer () {this.seconds += 1;if (this.seconds >= 60) {this.seconds = 0;this.minutes = this.minutes + 1;}if (this.minutes >= 60) {this.minutes = 0;this.hour = this.hour + 1;}this.total = this.minutes + this.hour * 60this.thistime = (this.minutes < 10 ? '0' + this.minutes : this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds : this.seconds) + '  total:' + this.totalthis.$refs.startTimer.innerHTML = (this.minutes < 10 ? '0' + this.minutes : this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds : this.seconds) + '已清洗:' + this.total +'分钟';},gettime(){this.timer = setInterval(this.startTimer, 1000);}}
}

需要其他的代码可以点个关注然后私聊我，我发给你~

【项目记录】用vue-h5写可前后端分离和控制计时的物联网移动端app相关推荐

Springboot+vue 社团管理系统（前后端分离）
Springboot+vue 社团管理系统(前后端分离) zero.项目功能设计图一.数据库设计(项目准备) 1.建表 2.表目录二.前端编写(vue) 1.搭建Vue框架 2.放入静态资源(as ...
SprinBoot-data-jpa整合Vue使用Swagger2实现前后端分离
SprinBoot整合Vue使用Swagger2实现前后端分离首先是后台 Swagger相关的依赖 <dependency><g ...
Vue+SpringBoot图书管理系统前后端分离（教你一步一步搭建）
Vue+SpringBoot图书管理系统前后端分离(教你一步一步搭建) 介绍: 说明: 环境搭建后端环境搭建 1.新建一个工程(只有收费版的idea才有这个选项哦) 2.选择Java8 4.配置工程 ...
Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的，一键生成代码和API接口的，通用后台管理系统快速开发框架，开发小程序和APP的推荐框架！
Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的,一键生成代码和API接口的,通用后台管理系统快速开发框架,开发小程序和APP的推荐框架! 概述 R ...
大前端–Vue前端体系、前后端分离
大前端–Vue前端体系.前后端分离前言 Soc:关注点分离原则 HTML+CSS+JS(视图):给用户看,刷新后台给的数据网络通信:axios 页面跳转:vue-router 状态管理:vuex ...
Vue+SpringBoot+Mybatis+Mysql前后端分离案例
Vue+SpringBoot+Mybatis+Mysql前后端分离案例(二) 前端开发 main.js代码如下 import Vue from 'vue' import App from './App ...
Element-UI + Vue.js + SpringBoot 实现前后端分离入门项目
Element UI 项目简介与演示刷新页面时让组件默认为当前路由路径删除时确认分页功能的实现 el-date-picke 日期少一天前端部分源码:https://github.com/szl ...
基于Vue和Django搭建前后端分离项目
前言最近公司要做一个系统,需要前后端分离,后端使用Django,前端使用Vue,因为之前主要做的是后端开发,前端只会写一写简单的,Vue只会绑定数据,至于Vue怎么与Django结合还是第一次接触, ...
js 获得明天0点时间戳_Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战...
点击上方"测试开发技术",选择设为"设为星标" 优质文章,第一时间送达! 学习全文大概需要 12分钟,内容实战性较强. 1. 前言本篇将基于Python 3. ...

【项目记录】用vue-h5写可前后端分离和控制计时的物联网移动端app

【项目记录】用vue-h5写可前后端分离和控制计时的物联网移动端app相关推荐

最新文章

热门文章