要是以前學過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);}} }

需要其他的代碼可以點個關注然后私聊我，我發給你~

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的【项目记录】用vue-h5写可前后端分离和控制计时的物联网移动端app的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。