小程序时间调用的程序

最新推荐文章于 2024-07-21 09:18:45 发布

weixin_37975044

最新推荐文章于 2024-07-21 09:18:45 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_37975044/article/details/79415451

小程序轮播图效果

先看代码

wxml

<view class="section" style="background:#787878;margin:20rpx;padding:20rpx">  
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">  
    <view class="picker">  
      国家：{{array[index]}}  
    </view>  
  </picker>  
</view>  
  
<view class="section" style="background:#787878;margin:20rpx;padding:20rpx">  
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">  
    <view class="picker">  
     时间 : {{time}}  
    </view>  
  </picker>  
</view>  
<view class="section" style="background:#787878;margin:20rpx;padding:20rpx">  
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">  
    <view class="picker">  
      日期: {{date}}  
    </view>  
  </picker>  
</view> 

Page({
  data: {
    // text:"这是一个页面"
    array: ['Android', 'IOS', 'ReactNativ', 'WeChat', 'Web'],
    index: 0,
    time: '08:30',
    date: '2016-09-26'
  },

  /**
   * 监听普通picker选择器
   */
  listenerPickerSelected: function (e) {
    //改变index值，通过setData()方法重绘界面
    this.setData({
      index: e.detail.value
    });
  },

  /**
   * 监听时间picker选择器
   */
  listenerTimePickerSelected: function (e) {
    //调用setData()重新绘制
    this.setData({
      time: e.detail.value,
    });
  },
/* 日期组件*/
  /**
   * 监听日期picker选择器
   */
  listenerDatePickerSelected: function (e) {
    this.setDate({
      date: e.detail.value
    })
  },

  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  }
})