微信小程序单位时间日期选择器样式模板制作设计下载

今天给大家带来单位时间日期选择器样式模板制作设计，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="page">
    <view class="page__hd">
        <view class="page__title">Picker</view>
        <view class="page__desc">选择器，这里使用小程序原生的picker。</view>
    </view>
    <view class="page__bd">
        <view class="weui-btn-area">
            <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
                <button type="default">单列选择器</button>
            </picker>
            <picker class="weui-btn" mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
                <button type="default">时间选择器</button>
            </picker>
            <picker class="weui-btn" mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
                <button type="default">日期选择器</button>
            </picker>
        </view>
    </view>
</view>

二、wxss样式文件代码如下：

page{
    background-color: #FFFFFF;
}

三、js页面代码如下：

Page({
    data: {
        array: ['美国', '中国', '巴西', '日本'],
        index: 0,
        date: '2016-09-01',
        time: '12:01'
    },
    bindPickerChange: function(e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
            index: e.detail.value
        })
    },
    bindDateChange: function(e) {
        this.setData({
            date: e.detail.value
        })
    },
    bindTimeChange: function(e) {
        this.setData({
            time: e.detail.value
        })
    }
});

模板简介：该模板名称为【微信小程序单位时间日期选择器样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。