小程序轮播图效果
先看代码
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
>
js
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 () {
// 页面关闭
}
})
效果图
是不是很简单呢
自己动手写一个吧