uniApp實現選擇時間功能
更新時間：2024年03月06日 09:49:30 作者：牧碼人MJ682517
這篇文章主要介紹了uniApp實現選擇時間功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
1、孫子組件
1.1、html部分
<template>
<view>
<checkbox-group @change="checkboxChange">
<view class="check_number_box">
<view class="check_number_item" v-for="(item, i) in checkNumberData" :key="i">
<view>
<!-- toString() 的作用是把數字轉為字符串，否則報錯 -->
<checkbox :value="item.toString()" :checked="item == defaultValue[0]" />
</view>
<text>{{ item }}</text>
</view>
</view>
</checkbox-group>
</view>
</template>1.2、JavaScript部分
export default {
props: {
checkNumberData: {
type: Number,
default: () => {
return 7
},
}
},
data() {
return {
defaultValue: [1]
}
},
methods: {
checkboxChange(event) {
this.defaultValue = event.detail.value;
}
}
}1.3、css部分
* {
margin: 0;
padding: 0;
}
.check_number_box {
box-sizing: border-box;
padding: 10rpx 50rpx;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10rpx 10rpx;
}
.check_number_item {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 30rpx;
}
.check_number_item>text {
margin-left: 6rpx;
}2、子組件
2.1、html部分
<template> <view> <view class="set_cycle_box"> <radio-group @change="radioChange"> <view class="cycle_box"> <!-- 每日 --> <view class="cycle_item"> <view>每日</view> <view> <radio value="1" checked="true" /> </view> </view> <!-- 每周 --> <view class="cycle_item"> <view>每周</view> <view> <radio value="2" /> </view> </view> <checkNumber :checkNumberData="weekCycle" v-show="current == 2" ref="weekData"></checkNumber> <!-- 每月 --> <view class="cycle_item"> <view>每月</view> <view> <radio value="3" /> </view> </view> <checkNumber :checkNumberData="dayCycle" v-show="current == 3" ref="dayData"></checkNumber> <!-- 自定義 --> <view class="cycle_item"> <view>自定義</view> <view> <radio value="4" /> </view> </view> <view class="set_cycle_title" v-show="current == 4"> 請選擇月份 </view> <checkNumber :checkNumberData="monthCycle" v-show="current == 4" ref="monthCustomaData"></checkNumber> <view class="set_cycle_title" v-show="current == 4"> 請選擇日期 </view> <checkNumber :checkNumberData="dayCycle" v-show="current == 4" ref="dayCustomaData"></checkNumber> </view> </radio-group> <view class="submit" @click="submitBtn"> 確認 </view> </view> </view> </template>
2.2、JavaScript部分
import checkNumber from '@/components/checkNumber/checkNumber.vue'
export default {
components: {
checkNumber
},
data() {
return {
current: 1,
// 給孫子組件傳遞參數（start）
weekCycle: 7,
dayCycle: 31,
monthCycle: 12,
// 給孫子組件傳遞參數（end）
}
},
methods: {
// 單選狀態(tài)
radioChange(event) {
let i = event.detail.value;
this.current = i;
},
// 確認
submitBtn() {
let i = this.current;
i = Number(i);
let submitData = {};
switch (i) {
case 2:
submitData.type = i;
submitData.submitWeek = this.$refs.weekData.defaultValue;
break;
case 3:
submitData.type = i;
submitData.submitDay = this.$refs.dayData.defaultValue;
break;
case 4:
submitData.type = i;
submitData.submitCustomaMonth = this.$refs.monthCustomaData.defaultValue;
submitData.submitCustomaDay = this.$refs.dayCustomaData.defaultValue;
break;
default:
submitData.type = i;
submitData.submitDay = [1];
}
this.$emit('clickSetCycle', submitData)
}
}
}2.3、css部分
.set_cycle_box {
margin-top: 60rpx;
}
.cycle_box {
padding: 0 50rpx;
font-size: 30rpx;
font-weight: 600;
}
.cycle_item {
display: flex;
justify-content: space-between;
align-items: center;
margin: 16rpx 0;
}
.submit {
background-color: #007AFF;
color: #FFFFFF;
font-size: 32rpx;
font-weight: 600;
width: 30%;
line-height: 50rpx;
text-align: center;
border-radius: 10rpx;
position: relative;
left: 50%;
transform: translate(-50%);
margin: 60rpx 0;
}
.set_cycle_title {
margin: 16rpx 0;
font-size: 26rpx;
color: #888888;
padding-left: 50rpx;
}3、父組件
3.1、html部分
<template> <view> <setCycle @clickSetCycle="cycleControl"></setCycle> </view> </template>
3.2、JavaScript部分
import setCycle from '../../components/setCycle/setCycle.vue'
export default {
comments: {
setCycle
},
data() {
return {
}
},
methods: {
cycleControl(data) {
console.log(data);
//
},
}
}4、效果圖
到此這篇關于uniApp實現選擇時間功能的文章就介紹到這了,更多相關uniApp選擇時間內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了如何通過JavaScript實現函數重載，文中的示例代碼講解詳細，對我們學習JavaScript有一定的幫助，感興趣的可以了解一下2023-01-01
這篇文章主要介紹了微信小程序背景音樂開發(fā)詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
條件語句用于基于不同的條件來執(zhí)行不同的動作,下面這篇文章主要給大家介紹了關于JS?if?else語句(條件判斷語句)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Layui事件監(jiān)聽的實現(表單和數據表格)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了很棒的js Tab選項卡切換效果，簡單的選項卡切換特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08![深入理解選擇框腳本[推薦]](http://img.jbzj.com/images/xgimg/bcimg5.png)
選擇框是通過<select>和<option>元素創(chuàng)建的，又稱為下拉列表框。為了方便與這個控件交互，除了所有表單字段共有的屬性和方法外，javascript還提供了一些屬性和方法。本文將詳細介紹選擇框腳本2016-12-12
下面小編就為大家?guī)硪黄獙τ贘avascript 執(zhí)行上下文的全面了解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
easyui combobox開啟搜索自動完成功能的實例代碼
下面小編就為大家?guī)硪黄猠asyui combobox開啟搜索自動完成功能的實例代碼。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
在之前的編程語言排行榜中，我們曾介紹過轉正在即的JavaScript語言，正如文章中闡明的那樣，JavaScript不僅是最具活力的腳本語言，還是是最有用的編程語言之一。2010-08-08
這篇文章主要介紹了JS控制一個DIV層在指定時間內消失的方法,需要的朋友可以參考下2014-02-02