<!-- index.wxml -->
<view>
<!-- 头部 -->
<view class="head">
<!-- 我的一天 -->
<view class="top">
<view>
<text class="today">我的一天</text>
<text class="month">2月12日</text>
<text class="day">星期一</text>
</view>
<view>
日历
</view>
</view>
<!-- 新建 -->
<view class="bottom">
新建
</view>
</view>
<!-- 测试 -->
<view class="big" bindtouchstart="start" catchtouchmove="move" bindtouchend="end">
<view class="time {{item.check==true?'grey':''}} {{item.oldTime==true?'offColor':''}}" wx:for="{{timeList}}" style="height:{{itemHeight}}px">{{item.time}}</view>
</view>
</view>
.head{
width: 100%;
height:250rpx;
box-sizing: border-box;
padding: 30rpx 20rpx;
background-color: #D8D8D8;
}
.top{
width: 100%;
display: flex;
justify-content: space-between;
}
.today{
/* font-weight:bolder; */
font-size: 56rpx;
}
.month{
display: inline-block;
margin: 0 20rpx;
font-size: 32rpx;
}
.day{
font-size: 32rpx;
}
.bottom{
width: 250rpx;
height: 60rpx;
color: #FFFFFF;
font-size: 32rpx;
margin-top: 30rpx;
background-color:#A4A4A4;
}
/* 测试 */
.time{
width: 100%;
/* height: 100rpx; */
/* border: 1px solid red; */
}
.grey{
color: red;
background-color:#C4C4C4;
}
.big{
/* border: 1px solid blue; */
}
.offColor{
color: #999;
}
Page({
data: {
timeList: [{
time: "08:30",
//是否被选
check: false,
//边界点顶部
topPoint: 0,
//边界点底部
bottomPoint: 0,
//是否为过去的时间
oldTime:false,
},
{
time: "09:30",
check: false,
//边界点顶部
topPoint: 0,
//边界点底部
bottomPoint: 0,
//是否为过去的时间
oldTime:false,
},
{
time: "10.30",
check: false,
//边界点顶部
topPoint: 0,
//边界点底部
bottomPoint: 0,
//是否为过去的时间
oldTime:false,
},
{
time: "11.30",
check: false,
//边界点顶部
topPoint: 0,
//边界点底部
bottomPoint: 0,
//是否为过去的时间
oldTime:false,
},
{
time: "12.45",
check: false,
//边界点顶部
topPoint: 0,
//边界点底部
bottomPoint: 0,
//是否为过去的时间
oldTime:false,
},
{
time: "13.30",
check: false,
//边界点顶部
topPoint: 0,
//边界点底部
bottomPoint: 0,
//是否为过去的时间
oldTime:false,
},
{
time: "14.30",
check: false,
//边界点顶部
topPoint: 0,
//边界点底部
bottomPoint: 0,
//是否为过去的时间
oldTime:false,
},
{
time: "15.30",
check: false,
//边界点顶部
topPoint: 0,
//边界点底部
bottomPoint: 0,
//是否为过去的时间
oldTime:false,
},
{
time: "16.30",
check: false,
//边界点顶部
topPoint: 0,
//边界点底部
bottomPoint: 0,
//是否为过去的时间
oldTime:false,
},
{
time: "17.30",
check: false,
//边界点顶部
topPoint: 0,
//边界点底部
bottomPoint: 0,
//是否为过去的时间
oldTime:false,
},
],
//触摸开始的点
startPoint: 0,
offsetTop: 106,
itemHeight:50,
},
onLoad(){
let hour=new Date().getHours()
let minutes=new Date().getMinutes()>9?new Date().getMinutes():'0'+new Date().getMinutes().toString()
let newDate=`${hour}:${minutes}`
let dateMap=this.data.timeList.map((item)=>{
if(item.time<newDate){
item.oldTime=true
console.log("过去了")
}else{
item.oldTime=false
}
return item
})
this.setData({
timeList:dateMap
})
},
start(e) {
console.log( e.touches[0].pageY)
//触摸开始的点
this.setData({
startPoint: e.touches[0].pageY
})
//计算列表中每个元素的顶部位置与底部位置
let timeList = this.data.timeList.map((item, index) => {
item.topPoint = this.data.offsetTop + this.data.itemHeight * index
item.bottomPoint = this.data.offsetTop + this.data.itemHeight * (index + 1)
return item
})
this.setData({
timeList: timeList
})
let timeList2 = this.data.timeList.map((item,index)=>{
if (item.topPoint < this.data.startPoint && this.data.startPoint < item.bottomPoint) {
item.check = true
console.log(item.topPoint,"定点")
console.log(item.bottomPoint,"底点")
console.log(index)
}
return item
})
this.setData({
timeList: timeList2
})
},
move(e) {
let timeList2 = this.data.timeList.map((item)=>{
if (item.topPoint < e.touches[0].pageY && e.touches[0].pageY < item.bottomPoint) {
item.check = true
}
return item
})
this.setData({
timeList: timeList2
})
},
end() {
},
})
我的设计思想是:
给最大的块添加触摸事件,计算每个列表元素的顶点位置,以及底边位置,判断触点是在哪个列表元素的范围内.
image.png
在编写过程中,遇到的问题有:
1.设置列表元素的高itemHeight为100rpx,但是获取pageY的单位是px,所以我目前将itemHeight设置为50px.
2.过去时间列表中如果把time:08.30写成time:8:30,会无法比较他是不是过去时间.
3.如果你使用的是clientY,需要获取页面滚动距离.
//监听滚动事件 scrollTop 滚动的距离
onPageScroll:function(e){
console.log(e.scrollTop, this.data.scroll_top)
this.setData({
'scroll_top': e.scrollTop
})
},
//触摸开始的点
this.setData({
startPoint: e.touches[0].pageY+this.data.scroll_top
})
clientY：页面可视区左上角顶部为原点（不论页面滚轮下拉多少，点击最顶部依旧是0）
screenY：以你电脑屏幕的顶部左上角为原点（基本上可以用这个量你电脑屏幕的分辨率了。跟页面怎样无关）
pageY：以页面左上角为原点（滚动到页面底部一点击，你就能知道这个页面的高度，pageY=clientY+scrollTop）
4.在滑动多选过程中需要将bindtouchmove改为catchtouchmove,因为在使用bindtouchmove时,页面会滚动,影响用户体验.
网友评论