效果图
是粗糙了一些嗷不过实现功能比较重要嘿~
首先，在根目录下新建一个文件夹，专门放置组件内容。该文件夹下再新建文件夹，放置我们写好的时间搜索的内容。
文件位置
组件内容涉及到picker的使用，用微信小程序自带的也可以，vant组件库里也可以。不过个人感觉小程序自带的比较好用，直接操作就行，不用操作像vant组件库里那么多的方法。。点击展开picker，选择时间，确认时间。。就很烦哈哈哈哈哈哈
timeFilter.wxml文件内容：（startTime为起始日期，endTime为结束日期。picker内的截至日期end默认为当前日期。）
<view class="search_round">
<view class="time">
<picker mode="date" value="{{startTime}}" start="2000-01-01" end="{{currentDate}}" bindchange="bindDateChange" data-msg="start">
<view class="start">
{{ startTime }}
</view>
</picker>
<view class="line">——</view>
<picker mode="date" value="{{endTime}}" start="2000-01-01" end="{{currentDate}}" bindchange="bindDateChange" data-msg="end">
<view class="end">
{{ endTime }}
</view>
</picker>
</view>
<view class="search" bindtap="_handleFilter">
<van-icon name="search" size="24" color="lightgrey" />
</view>
</view>
timeFilter.wxss文件内容：
.search_round{
box-sizing: border-box;
width: 100%;
margin-bottom: 0;
border-radius: 50px;
background: #fff;
font-size: 26rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4rpx;
padding-left: 20rpx;
}
.search_round .time {
color: #868383;
flex: 7;
display: flex;
align-items: center;
justify-content: space-around;
}
.search_round .search {
flex: 1;
margin-left: 20rpx;
margin-top: 10rpx;
}
timeFilter.json文件内容：
{
"component": true,
"usingComponents": {
"van-icon": "@vant/weapp/icon/index"
}
}
timeFilter.js文件内容：
// pages/common/timeFilter.js
Component({
lifetimes: {
// 组件的生命周期函数。进入页面即获取当前日期
attached: function () {
this.getTime();
}
},
/**
* 组件的属性列表：在父组件中可能会进行操作的变量设置在properties里
*/
properties: {
startTime: {
type: String,
value: ""
},
endTime: {
type: String,
value: ""
},
},
/**
* 组件的初始数据：父组件中不会发生改变的变量设置在data里
*/
data: {
timeType: "",
currentDate: ""
},
/**
* 组件的方法列表
*/
methods: {
getTime() {
// 获取当前日期
let date = new Date();
// 格式化当前日期
let year = date.getFullYear();
let agoMonth = date.getMonth();
let month = date.getMonth() + 1;
let day = date.getDate();
// 补零儿
agoMonth = agoMonth <= 9 ? `0${agoMonth}` : agoMonth;
month = month <= 9 ? `0${month}` : month;
day = day <= 9 ? `0${day}` : day;
let endTime = `${year}-${month}-${day}`;
let startTime = `${year}-${agoMonth}-${day}`;
// 赋值
this.setData({
endTime,
startTime,
currentDate: endTime
})
},
bindDateChange(e) {
// 取值
let value = e.detail.value;
// 两个日期用了同一个方法，所以另外设置一个参数来做区分
let timeType = e.currentTarget.dataset.msg;
// 起始日期赋值
if (timeType == 'start') {
this.setData({
startTime: value
})
}
// 结束日期赋值
if (timeType == "end") {
this.setData({
endTime: value
})
}
},
// 点击搜索图表进行的操作
_handleFilter() {
let startTime = new Date(this.data.startTime).getTime();
let endTime = new Date(this.data.endTime).getTime();
// 起始日期不能超过结束日期的拦截
if (startTime > endTime) {
wx.showToast({
title: "请选择正确时间区间",
icon: "none",
duration: 2000
})
return;
}
// 这个我菜鸡讲不清楚。。。。官方文档里有解释。。还可以进行更多设置。。尼萌自己去看哈哈哈哈
this.triggerEvent("handleFilter");
}
}
})
组件内容就是这些👆，以下是父组件中的设置。
父组件.json配置：↓
{
"usingComponents": {
"time-filter": "../../../components/timeFilter/timeFilter"
},
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "时间检索",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
父组件.wxml：（最好在引入的timeFilter外面再套个容器，将来在父组件中方便设置样式）
<view class="time-container">
<time-filter id="filter" startTime="{{startTime}}" endTime="{{endTime}}" bind:handleFilter="_handleFilter"></time-filter>
</view>
父组件中的样式就不上了，只在time-container设置了一个宽度，和居中~
父组件.js中需要进行三个操作。
1.（需要为起始日期和结束日期提前赋值的话才进行这一步）在data中设置变量，与子组件双花括号内的名称一致
Page({
data {
startTime: "",
endTime:""
}
})
2.生命周期函数onShow中 ↓（这里的id需要和上面的id对应）
onShow() {
this.timeFilter = this.selectComponent('#filter');
},
3.子组件内的方法使用↓
_handleFilter() {
// 这里，实不相瞒，该干嘛就干嘛了哈哈哈需要传值的传值，调接口的调接口
// 需要取值的语法
let start = this.timeFilter.data.startTime;
let end = this.timeFilter.data.endTime;
console.log(start,"start");
console.log(end,"end");
},
网友评论