uni-app提交表单成功之后跳转首页
生活随笔
收集整理的這篇文章主要介紹了
uni-app提交表单成功之后跳转首页
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
功能需求:
1:填寫表單內(nèi)容,點擊提交審批按鈕,提交成功之后,彈出彈框,提示已經(jīng)提交成功。2:提交成功之后,兩秒鐘之后自動跳轉(zhuǎn)到首頁
主要函數(shù):
sub() {uni.showToast({title: '上傳成功',icon: 'success',duration: 1000})setTimeout(() => {uni.switchTab({url: "../main",});}, 600);},參考代碼:
<template><view><form><view class="cu-form-group margin-top"><view class="title">補卡原因</view><picker @change="PickerChange" :value="index" :range="picker"><view class="picker">{{index>-1?picker[index]:'出差'}}</view></picker></view><!-- #endif --><view class="cu-form-group"><view class="title">時間選擇</view><picker mode="time" :value="time" start="09:01" end="21:01" @change="TimeChange"><view class="picker">{{time}}</view></picker></view><view class="cu-form-group"><view class="title">日期選擇</view><picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange"><view class="picker">{{date}}</view></picker></view><view class="cu-form-group align-start"><view class="title">補卡事由</view><textarea maxlength="-1" :disabled="modalName!=null" @input="textareaBInput" placeholder="多行文本輸入框"></textarea></view><view class="uni-btn-v uni-common-mt"><button class="btn-submit" formType="submit" type="primary" @click="sub">提交審批</button></view></form></view> </template> <script>export default {data() {return {index: -1,picker: ['出差', '年休', '忘記打卡', '病假', '事假', '外勤'],// multiIndex: [0, 0, 0],time: '12:01',date: '2018-12-25',modalName: null,textareaBValue: ''};},methods: {PickerChange(e) {this.index = e.detail.value},sub() {uni.showToast({title: '上傳成功',icon: 'success',duration: 1000})setTimeout(() => {uni.switchTab({url: "../main",});}, 600);},TimeChange(e) {this.time = e.detail.value},DateChange(e) {this.date = e.detail.value},textareaBInput(e) {this.textareaBValue = e.detail.value}}} </script><style>.cu-form-group .title {min-width: calc(4em + 15px);}.btn-submit {background-color: #1C2A86;margin: 100upx 20upx;color: #fff;} </style>總結(jié)
以上是生活随笔為你收集整理的uni-app提交表单成功之后跳转首页的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 小米日历详解
- 下一篇: codeforces514