小程序分类页面左右联动滑动效果

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;
}