wxml
<view class="title">
<view class="titleItem {{index==currentDate?'active':''}}" data-index="{{index}}" bindtap="changeDate" wx:for="{{['周一','周二','周三','周四','周五','周六','周日']}}">
{{item}}
<view class="titleItem2" wx:if="{{index==currentDate}}"></view>
</view>
</view>
<view class="content">
<scroll-view class="left" scroll-y="true" scroll-top="{{category1Tops}}">
<view id="itemLeft" wx:for="{{category}}" data-index="{{index}}" style="font-size: {{item.length>=5?24:30}}rpx;" data-category="index{{index}}" bindtap="changeCategory" class="{{currentCategory==index?'active2':''}}">{{item}}</view>
</scroll-view>
<view class="right">
<view scroll-x="true" class="category">
<view data-index="{{index}}" bindtap="changeDate2" wx:for="{{['早餐','午餐','晚餐']}}" class="item {{currentDate2==index?'active3':''}}" data-index="{{index}}">
{{item}}
<view wx:if="{{currentDate2==index}}" style="width: 50rpx;height: 5px;background-color: orange;"></view>
</view>
</view>
<scroll-view class="sv" data-index="{{index}}" bindscroll="scroll1" scroll-y="true" scroll-top="{{tops}}" scroll-into-view="{{toview}}" show-scrollbar="false" bindtouchstart="touchStart">
<view id="{{item.toview}}" class="svItem" wx:for="{{all}}">
<image mode="aspectFill" style="width:168rpx;height: 138rpx;" src="{{item.showImageUrl!==null?item.showImageUrl:'https://yuanqus.oss-cn-beijing.aliyuncs.com/ca3d5ade43944c48892aa851cda158c7.jpg'}}"></image>
<view class="itemInfo">
<view style="font-weight: bold;">{{item.name}}</view>
<view style="font-size: 26rpx;color: red;font-weight: bold;">¥{{item.price}}</view>
</view>
</view>
<view style="width: 100%;height: {{maxHeight2}}rpx;"></view>
</scroll-view>
</view>
</view>
js
const app = getApp(),
COM = require("../../../utils/util.js"),
api = require("../../../component/api/requestApi");
Page({
data: {
currentDate: 0,
currentDate2: 0,
category: [],
currentCategory: 0,
all: [],
toView: '',
list:[
],
isClick: false,
currentYmd:'',
tops: 0,
category1Tops: -1,
currentIndex: '',
size: '',
isScroll: 0,
maxHeight: 0 //右侧实际高度
},
change(){
this.setData({
category1Tops: 100
})
},
changeDate(e){
this.setData({
tops: 0,
currentCategory: 0
})
if(e.currentTarget.dataset.index==new Date().getDay()-1){
this.getDay()
if(this.data.currentDate2==0){
this.getList(this.data.today,'breakfast')
}else if(this.data.currentDate2==1){
this.getList(this.data.today,'lunch')
}else{
this.getList(this.data.today,'dinner')
}
}else{
this.setData({
currentDate: e.currentTarget.dataset.index,
currentDate2: 0
})
console.log(e.currentTarget.dataset.index,this.data.currentDate,5555)
let res = e.currentTarget.dataset.index-this.data.currentIndex
console.log(this.data.today,res,888)
let date = this.dateLater(this.data.today,res)
this.setData({
currentYmd: date
})
this.getList(date,'breakfast')
}
},
changeDate2(e){
let index = e.currentTarget.dataset.index
this.setData({
currentDate2: e.currentTarget.dataset.index,
tops: 0
})
var date = new Date()
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
let time = year+'-'+month+'-'+day
console.log(e.currentTarget.dataset.index,new Date().getDay()-1)
if(this.data.currentDate==new Date().getDay()-1){
if(index==0){
this.getList(time,'breakfast')
}else if(index==1){
this.getList(time,'lunch')
}else{
this.getList(time,'dinner')
}
}else{
console.log(3333)
if(index==0){
this.getList(this.data.currentYmd,'breakfast')
}else if(index==1){
this.getList(this.data.currentYmd,'lunch')
}else{
this.getList(this.data.currentYmd,'dinner')
}
}
},
changeCategory(e){
this.setData({
isScroll: 1
})
console.log(e.currentTarget.dataset.index,this.data.category[e.currentTarget.dataset.index],777)
this.setData({
currentCategory: e.currentTarget.dataset.index,
toview: e.currentTarget.dataset.category
})
},
touchStart(){
this.setData({
isScroll: 0
})
},
scroll1(e){
if(this.data.isScroll==1){
return false
}
let top = e.detail.scrollTop*2
let indexs = parseInt(top/this.data.itemHeight)-1<0?0:parseInt(top/this.data.itemHeight)
console.log(indexs,99999999)
let name = this.data.all[indexs].category
let currentIndex = this.data.category.indexOf(name)
this.setData({
currentCategory: currentIndex
})
if(this.data.currentCategory+1>this.data.maxL){
this.setData({
category1Tops: 40*this.data.rate*(this.data.category.indexOf(name)-this.data.maxL+1)
})
}else if(this.data.currentCategory+1<=this.data.maxL){
this.setData({
category1Tops: 0
})
}
},
currentDate(){ // 获取当前小时分钟
let timestamp = Date.parse(new Date())
let date = new Date(timestamp)
let hour = date.getHours()>=10?date.getHours():'0'+date.getHours()
let minute = date.getMinutes()>=10?date.getHours():'0'+date.getHours()
return hour+':'+minute
},
getDay(){
this.setData({
currentDate: new Date().getDay()-1,
currentIndex: new Date().getDay()-1,
currentDate2: this.currentDate()<'09:00'?0:this.currentDate()>'09:00'&&this.currentDate()<'14:00'?1:this.currentDate()>'14:00'?2:''
})
},
getList(time,type){
var that = this
this.setData({
all: [],
category: []
})
api.messMenu({
date: time,
mealType: type,
weekNum: this.data.currentDate+1
},res=>{
let arr = [] //分类
let arr2 = [] //分类数据
let newArr = []
res.map((res2,index)=>{
if(res2.foods.length>0){
newArr.push(res2)
}
})
console.log(newArr,44444)
let len = newArr.length-1
let len2 = newArr[len].foods.length
console.log('maxHeight:',that.data.maxHeight*that.data.rate)
let height
if(that.data.maxHeight*that.data.rate>that.data.itemHeight*len2){
height = (that.data.maxHeight*that.data.rate - that.data.itemHeight*len2)-15*that.data.rate*2
that.setData({
maxHeight2: height
})
}
console.log(height,54444)
newArr.map((res2,index)=>{
arr.push(res2.title)
res2.foods.map(res3=>{
res3.category = res2.title
res3.toview = 'index'+index
arr2.push(res3)
})
})
console.log(arr2)
that.setData({
category: arr,
all: arr2
})
})
},
onLoad(options) {
var that = this
wx.getSystemInfo({
success: function (res) {
// 获取可使用窗口宽度
let clientHeight = res.windowHeight;
// 获取可使用窗口高度
let clientWidth = res.windowWidth;
// 算出比例
let ratio = 750 / clientWidth;
// 算出高度(单位rpx)
let height = clientHeight * ratio;
console.log((height-88)/(99*ratio),(99*ratio),7777)
that.setData({
maxL: parseInt((height-88)/(40*ratio)),
rate: ratio,
size: (height-88)/(99*ratio),
itemHeight: (99*ratio)
})
}
});
const query = wx.createSelectorQuery()
query.select('.sv').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function (res) {
that.setData({
maxHeight: res[0].height
})
console.log('打印demo的元素的信息', res[0].height);
})
this.getDay()
var date = new Date()
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
let time = year+'-'+month+'-'+day
this.setData({
today: time
})
console.log(time,this.data.today)
let arr = []
this.data.list.map((res,index)=>{
res.data.map(res2=>{
res2.toview = 'index'+index
res2.category = res.category
arr.push(res2)
})
})
this.setData({
all: arr
})
this.getList(time,this.data.currentDate2==0?'breakfast':this.data.currentDate2==1?'lunch':this.data.currentDate2==2?'dinner':'')
},
dateLater(dates, later) {
let dateObj = {};
let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
let date = new Date(dates);
date.setDate(date.getDate() + later);
let day = date.getDay();
dateObj.year = date.getFullYear();
dateObj.month = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth()+1);
dateObj.day = (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
dateObj.week = show_day[day];
return dateObj.year+'-'+dateObj.month+'-'+dateObj.day;
}
})
wxss
.title{
width: 100%;
height: 88rpx;
display: flex;
align-items: center;
border-bottom: 1px solid #f2f2f2;
}
.titleItem{
flex: 1;
height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.titleItem2{
width: 50rpx;
height: 7rpx;
position: absolute;
bottom: 0;
background-color: blue;
}
.content{
width: 100%;
height: calc(100vh - 90rpx);
background-color: #f2f2f2;
display: flex;
}
.left{
width: 150rpx;
height: calc(100vh - 90rpx);
background-color: white;
}
.left view{
width: 100%;
height: 40px;
border-bottom: 1px solid #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
}
.active{
font-weight: bold;
}
.active2{
font-weight: bold;
background-color: #f2f2f2;
}
.active3{
color: orange;
}
.right{
width: 600rpx;
height: calc(100vh - 90rpx);
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.category{
width: 600rpx;
height: 40px;
overflow: scroll;
white-space: nowrap;
display: flex;
align-items: center;
background-color: white;
border-left: 1px solid #f2f2f2;
}
.item{
width: 120rpx;
height: 20px;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
flex-direction: column;
}
.sv{
width: 600rpx;
height: calc(100vh - 90rpx - 40px);
box-sizing: border-box;
padding: 30rpx 30rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.svItem{
width: 540rpx;
height: 84px;
background-color: white;
border-radius: 10rpx;
box-sizing: border-box;
padding: 15rpx 15rpx;
display: flex;
align-items: center;
margin-bottom: 15px;
}
.svItem image{
width: 168rpx;
height: 143rpx;
border-radius: 10rpx;
}
.itemInfo{
display: flex;
flex-direction: column;
margin-left: 40rpx;
}