uniApp實現(xiàn)選擇時間功能
更新時間：2024年03月06日 09:49:30 作者：牧碼人MJ682517
這篇文章主要介紹了uniApp實現(xiàn)選擇時間功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
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() 的作用是把數(shù)字轉為字符串，否則報錯 -->
<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,
// 給孫子組件傳遞參數(shù)（start）
weekCycle: 7,
dayCycle: 31,
monthCycle: 12,
// 給孫子組件傳遞參數(shù)（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實現(xiàn)選擇時間功能的文章就介紹到這了,更多相關uniApp選擇時間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了js代碼如何實現(xiàn)文字截斷功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了js代碼自動刪除稿件的普通彈幕功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
在頁面中我們最常見的頁面元素就是input了,但是我們?nèi)绾斡肑avaScript得到網(wǎng)頁input中輸入的value值呢,其實很簡單,方法也不止一種,今天給大家分享兩種JavaScript獲得input元素value值的方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了微信小程序wepy框架學習和使用心得詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
JavaScript單線程實現(xiàn)異步的詳細代碼示例
瀏覽器JavaScript的作用是操作DOM,這就決定了它只能是單線程的,否則會帶來很復雜的問題,這篇文章主要介紹了JavaScript單線程實現(xiàn)異步的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-08-08
本篇文章主要介紹了js鼠標滑輪滾動事件綁定的簡單實例(兼容主流瀏覽器)。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要為大家詳細介紹了基于openlayers4實現(xiàn)點的擴散效果 ，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了JS實現(xiàn)的input選擇圖片本地預覽功能,涉及javascript針對頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-08-08
這篇文章給大家介紹了在echarts中如何在柱狀圖上方顯示文字,文中給出了完整的示例代碼,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-01-01
這篇文章主要給大家介紹了利用transition屬性如何實現(xiàn)文字上下抖動的效果，文中給出了詳細的介紹和完整的實例代碼，相信對大家的學習具有一定的參考借鑒價值，有需要的朋友們下面來一起看看吧。2017-01-01