提交 a5bc70aa 编写于 作者: I iotjin

update vant

上级 1cd76330
// 单列文字 选择器
Component({
/**
* 组件的属性列表
*/
properties: {
// 是否显示选择器
isShowPicker: {
type: Boolean,
value: false,
},
// title
title: {
type: String,
value: '请选择',
},
// 字符串数组
textArr: {
type: Array,
value: [],
},
// 设置默认选中的索引
selectIndex: {
type: Number,
value: 0,
},
},
/**
* 组件的初始数据
*/
data: {
pickerTextArr: [], //字符串数组
pickerSelectIndexArr: [], //选中的index数组
},
/**
* 组件的方法列表
*/
methods: {
//显示Picker
showPicker: function () {
this.setData({
isShowPicker: true
});
},
//隐藏Picker
hiddenPicker: function () {
this.setData({
isShowPicker: false
});
},
//将要弹出popView
willShowPopView: function (event) {
var that = this
setTimeout(function () {
that.setData({
pickerSelectIndexArr: [that.properties.selectIndex]
})
}, 300)
},
//点击取消按钮
cancel: function (event) {
this.setData({
isShowPicker: false
});
},
//滚动
onChange: function (event) {
let value = event.detail.value
// console.log("滚动" + value);
this.setData({
pickerSelectIndexArr: [value[0]]
})
},
//点击确定按钮
confirm: function (event) {
let indexArr = this.data.pickerSelectIndexArr
var selectText = this.data.pickerTextArr[indexArr[0]]
// console.log("点击确定按钮: " + selectText);
this.setData({
isShowPicker: false
});
//传递选中的text
var dic = {
value: selectText,
index: indexArr[0]
}
this.triggerEvent('confirm', dic);
}
},
lifetimes: {
detached: function () {
// 页面销毁时执行
// console.info('---JhStringPicker unloaded!---')
},
attached: function () {
// 页面创建时执行
// console.info('---JhStringPicker loaded!---');
this.setData({
pickerTextArr: this.properties.textArr
})
}
}
})
/*
使用方法 :
1. usingComponents 添加
"string-picker": "../../components/string-picker/index"
"string-picker": "components/string-picker/index",
2. wxml 添加组件
data: {
isShowPicker: false,
stringPickerTextArr: ['一', '二', '三']
},
// 弹出
<string-picker textArr='{{stringPickerTextArr}}' selectIndex='1' isShowPicker='{{isShowPicker}}' title="请选择" bind:confirm='confirm1'>
</string-picker>
this.setData({
isShowPicker: true,
});
3.点击事件
//点击选择器的 确定
confirm1: function (event){
var dic = event.detail
console.log(dic.value);
console.log(dic.index);
},
*/
\ No newline at end of file
{
"component": true,
"usingComponents": {
"van-popup": "@vant/weapp/popup/index"
}
}
\ No newline at end of file
<van-popup position="bottom" custom-style="height: 50%;" show="{{isShowPicker}}" bind:close="hiddenPicker"
bind:before-enter="willShowPopView">
<view class="bgView">
<view class="pickerTool">
<view class="pickerCancel" bindtap="cancel">取消</view>
<view class="pickerTitle">{{title}}</view>
<view class="pickerOk" bindtap="confirm">确定</view>
</view>
<picker-view class="pickerView"
indicator-style="height: 40px;border-top:1px solid #eee;border-bottom:1px solid #eee;"
value="{{pickerSelectIndexArr}}" bindchange="onChange">
<picker-view-column class="pickerColumn0">
<view wx:for="{{pickerTextArr}}" wx:key='index' class="pickerColumnText">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
</van-popup>
\ No newline at end of file
.bgView {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 600rpx;
}
.pickerTool {
background: #f8f8f8;
display: flex;
justify-content: space-between;
height: 92rpx;
line-height: 92rpx;
border-bottom: 4rpx solid #eee;
padding: 0 20rpx;
}
.pickerOk {
font-weight: bold;
margin-right: 10rpx;
}
.pickerCancel {
margin-left: 10rpx;
color: #666;
}
.pickerView {
font-size: 34rpx;
height: 450rpx;
}
.pickerColumn0 {
text-align: center;
}
.pickerColumnText {
height: 40px;
line-height: 40px;
align-items: center;
text-align: center;
}
\ No newline at end of file
// 月日 周 时分 选择器
Component({
/**
* 组件的属性列表
*/
properties: {
// 是否显示选择器
isShowPicker: {
type: Boolean,
value: false,
},
// title
title: {
type: String,
value: '请选择时间',
},
},
/**
* 组件的初始数据
*/
data: {
columns: [],
pickerDateValueArr: [], //对应的年月日数组
pickerDateTextArr: [], //月周数组 x月xx日 周几 或今天
pickerHourTextArr: [], //小时数组 08
pickerMinuteTextArr: [], //分钟数组 24
pickerSelectIndexArr: [], //选中的index数组
pickerSelectText: '' //选中的时间
},
/**
* 组件的方法列表
*/
methods: {
//获取选中的时间
getTime: function () {
let ss = new Date().getSeconds();
if (ss < 10) {
ss = '0' + ss;
}
let time = this.data.pickerSelectText + ':' + ss;
return time;
},
//显示Picker
showPicker: function () {
this.setData({
isShowPicker: true
});
},
//隐藏Picker
hiddenPicker: function () {
this.setData({
isShowPicker: false
});
},
//将要弹出popView
willShowPopView: function (event) {
let day = this.data.pickerDateTextArr.indexOf("今天");
let hour = new Date().getHours();
let minute = new Date().getMinutes();
var that = this;
setTimeout(function () {
//要延时执行的代码
that.setData({
pickerSelectIndexArr: [day, hour, minute]
})
}, 300)
},
addDatetimeZero: function (num) {
return new Array(2 - num.toString().length + 1).join("0") + num;
},
//点击取消按钮
cancel: function (event) {
this.setData({
isShowPicker: false
});
},
//滚动
onChange: function (event) {
let value = event.detail.value;
// console.log("滚动"+value);
this.setData({
pickerSelectIndexArr: [value[0], value[1], value[2]]
})
},
//点击确定按钮
confirm: function (event) {
let indexArr = this.data.pickerSelectIndexArr;
var selectText = this.data.pickerDateValueArr[indexArr[0]] + ' ' + this.data.pickerHourTextArr[indexArr[1]] + ':' + this.data.pickerMinuteTextArr[indexArr[2]];
// console.log("点击确定按钮 -- " + selectText);
this.setData({
pickerSelectText: selectText,
isShowPicker: false
});
//传递选中的时间
let ss = new Date().getSeconds();
if (ss < 10) {
ss = '0' + ss;
}
let time = selectText + ':' + ss;
this.triggerEvent('confirm', time);
}
},
lifetimes: {
detached: function () {
// 页面销毁时执行
// console.info('---JhTimePicker unloaded!---')
},
attached: function () {
// 页面创建时执行
// console.info('---JhTimePicker loaded!---');
var pickerDateTextArr = [];
var pickerHourTextArr = [];
var pickerMinuteTextArr = [];
var pickerDateValueArr = [];
//初始时间
var pickerPreDate = new Date();
var pickerPreYear = pickerPreDate.getFullYear();
var pickerPreMonth = pickerPreDate.getMonth() + 1;
var pickerPreDay = pickerPreDate.getDate();
var pickerPreHour = pickerPreDate.getHours();
var pickerPreMinute = pickerPreDate.getMinutes();
this.data.pickerSelectText = pickerPreYear + '' + pickerPreMonth + '' + pickerPreDay + '' + this.addDatetimeZero(pickerPreHour) + ':' + this.addDatetimeZero(pickerPreMinute);
var pickerNowDate = new Date();
var pickerNowYear = pickerNowDate.getFullYear();
var pickerNowHour = pickerNowDate.getHours();
var pickerNowMinute = pickerNowDate.getMinutes();
var pickerOldYearDate = new Date(pickerNowYear - 1, 2, 0);
var pickerOldYearDayNum = 365;
if (pickerOldYearDate.getDate() == 29) pickerOldYearDayNum = 366;
var pickerNowMonth = pickerNowDate.getMonth() + 1;
var pickerNowDay = pickerNowDate.getDate();
var pickerWeekArr = ["", "", "", "", "", "", ""];
var pickerDateIndex = 0;
var pickerHourIndex = 0;
var pickerMinuteIndex = 0;
//获取年月日选择数组
for (let y = pickerNowYear - 1; y <= pickerNowYear + 1; y++) {
for (let m = 1; m <= 12; m++) {
let newDate = new Date(y, m, 0);
let m_days = newDate.getDate();
for (let d = 1; d <= m_days; d++) {
let newDate = new Date(y, m - 1, d);
let w = pickerWeekArr[newDate.getDay()];
if (d == pickerPreDay && m == pickerPreMonth && y == pickerPreYear) {
pickerDateIndex = parseInt((new Date(y + '/' + m + '/' + d) - new Date((pickerNowYear - 1) + '/1/1')) / 1000 / 60 / 60 / 24);
}
if (d == pickerNowDay && m == pickerNowMonth && y == pickerNowYear) {
pickerDateTextArr.push('今天');
} else {
pickerDateTextArr.push(m + '' + d + '日 周' + w);
}
pickerDateValueArr.push(y + '' + m + '' + d + '');
}
}
}
//获取小时和分钟的数组,设置默认值
for (let i = 0; i < 24; i++) {
pickerHourTextArr.push(this.addDatetimeZero(i));
if (pickerNowHour == i) pickerHourIndex = i;
}
for (let i = 0; i < 60; i++) {
pickerMinuteTextArr.push(this.addDatetimeZero(i));
if (pickerNowMinute == i) pickerMinuteIndex = i;
}
//赋值
this.setData({
pickerDateValueArr: pickerDateValueArr,
pickerDateTextArr: pickerDateTextArr,
pickerHourTextArr: pickerHourTextArr,
pickerMinuteTextArr: pickerMinuteTextArr,
pickerSelectIndexArr: [pickerDateIndex, pickerHourIndex, pickerMinuteIndex]
})
},
}
})
/*
使用方法 :
1. usingComponents 添加
"time-picker": "../../components/time-picker/index"
"time-picker": "components/time-picker/index",
2. wxml 添加组件
//根据属性 弹出
<time-picker isShowPicker='{{isShowPicker2}}' title="请选择时间" bind:confirm='confirm1'> </time-picker>
this.setData({
isShowPicker2: true,
});
//根据方法 弹出
<time-picker id='timePicker2' bind:confirm='confirm2'> </time-picker>
var picker = this.selectComponent('#timePicker2');
picker.showPicker();
3.点击事件
//点击选择器的 确定
confirm1: function (event){
console.log(event.detail);
this.setData({
currentDateStr1: event.detail,
});
},
confirm2: function (event) {
const picker = this.selectComponent('#timePicker2');
this.setData({
currentDateStr2: picker.getTime(),
});
},
*/
\ No newline at end of file
{
"component": true,
"usingComponents": {
"van-popup": "@vant/weapp/popup/index"
}
}
\ No newline at end of file
<van-popup position="bottom" custom-style="height: 50%;" show="{{isShowPicker}}" bind:close="hiddenPicker"
bind:before-enter="willShowPopView">
<view class="bgView">
<view class="pickerTool">
<view class="pickerCancel" bindtap="cancel">取消</view>
<view class="pickerTitle">{{title}}</view>
<view class="pickerOk" bindtap="confirm">确定</view>
</view>
<picker-view class="pickerView"
indicator-style="height: 40px;border-top:1px solid #eee;border-bottom:1px solid #eee;"
value="{{pickerSelectIndexArr}}" bindchange="onChange">
<picker-view-column class="pickerColumn0">
<view wx:for="{{pickerDateTextArr}}" wx:key='index' class="pickerColumnText">{{item}}</view>
</picker-view-column>
<picker-view-column class="pickerColumn1">
<view wx:for="{{pickerHourTextArr}}" wx:key='index' class="pickerColumn">{{item}}</view>
</picker-view-column>
<picker-view-column class="pickerColumn2">
<view wx:for="{{pickerMinuteTextArr}}" wx:key='index' class="pickerColumn">{{item}}</view>
</picker-view-column>
<picker-view-column class="pickerColumn3">
</picker-view-column>
</picker-view>
</view>
</van-popup>
\ No newline at end of file
.bgView {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 600rpx;
}
.pickerTool {
background: #f8f8f8;
display: flex;
justify-content: space-between;
height: 92rpx;
line-height: 92rpx;
border-bottom: 4rpx solid #eee;
padding: 0 20rpx;
}
.pickerOk {
font-weight: bold;
margin-right: 10rpx;
}
.pickerCancel {
margin-left: 10rpx;
color: #666;
}
.pickerView {
font-size: 34rpx;
height: 480rpx;
}
.pickerColumn {
height: 40px;
line-height: 40px;
text-align: center;
}
.pickerColumn0 {
flex: 0 0 54%;
text-align: left;
}
.pickerColumn1 {
flex: 0 0 23%;
}
.pickerColumn2 {
flex: 0 0 23%;
}
.pickerColumnText {
height: 40px;
line-height: 40px;
align-items: center;
text-align: center;
}
\ No newline at end of file
......@@ -15,6 +15,9 @@
"pages/demoList/listViewDemoList/listView/listView4",