湘潭网站建设 沟通磐石网络如何建立自己的网站?

目录

1.基本介绍

2.案例介绍

        ①注意事项：

        ②效果展示

3.代码展示

        ①view部分

②js部分

③css样式

---

1.基本介绍

        从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

2.案例介绍

        ①注意事项：

                当选择时间和日期的时候会默认直接展示当前的时间和当天的日期

        ②效果展示

                          

3.代码展示

        ①view部分

<!--日期选择-->
                        <view class="SelectDate">
                            <view class="DateLabel">
                                面试日期
                            </view>
                            <view class="DateText">
                                <picker mode="date" @change="onDateChange" :value="DateValue">
                                    <view class="date-picker">{{DateValue}}</view>
                                </picker>
                            </view>
                        </view>

                        <view class="SelectTime">
                            <view class="TimeLabel">
                                面试时间
                            </view>
                            <view class="TimeText">
                                <picker mode="time" @change="onTimeChange" :value="TimeValue">
                                    <view class="Time-picker">{{TimeValue}}</view>
                                </picker>
                            </view>
                        </view>

②js部分

<script>
    export default {
        data() {

            return {
                DateValue: "请选择日期",
                TimeValue: "请选择时间",
            }
        },
        methods: {

            onDateChange: function(e) {
                this.DateValue = e.detail.value;
            },

            onTimeChange: function(e) {
                this.TimeValue = e.detail.value;
            }
            
        }
    }
</script>

③css样式

        /* ## 日期 ## */

            .SelectDate {
                height: 72rpx;
                display: flex;
                flex-direction: grow;
                margin-top: 24rpx;
            }

            .DateLabel {
                width: 0;
                flex-grow: 3;
                text-align: left;
                padding-left: 24px;

            }

            .DateText {
                width: 0;
                flex-grow: 7;
            }

            .date-picker {
                color: #8f8f8f;
            }

            /* ## 时间 ## */

            .SelectTime {
                display: flex;
                flex-direction: grow;
            }

            .TimeLabel {
                width: 0;
                flex-grow: 3;
                text-align: left;
                padding-left: 24px;
            }

            .TimeText {
                width: 0;
                flex-grow: 7;
            }

            .Time-picker {
                color: #8f8f8f;
            }

以上是一个以uni-app使用picker些的简单的一个时间选择器的小案例；

详情可看：picker | uni-app官网