微信小程序 实现美团外卖 菜单分类,左右联动 效果

最近项目要求写一个美团菜单分类左右联动的需求 记录一下 

1,首先 需要使用到 scroll-view 组件 左右2边 都需要滑动 直接上代码

scroll-into-view 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 id="scroll-{{index}}"  这个必须要有 不然实现不了左边联动右边的效果


	
	
		{{item.name}}
	

	
	
		
		
			{{item.name}}
			
				{{items}}
			
		
	

2,本地data模拟json数据 渲染页面 

左边点击事件 tabNav 控制点击那一个 改变该背景颜色 右边就滑动到该类别

右边滑动事件 scrollLink 实现滑动 到那一个类别 左边跟着一起变化 背景也是一样变化

详细 注释看代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{
      name: '肉末豆腐',
      list: [
        '酱油10 克、细盐3 克、味精3 克',
        '将豆腐切成2厘米见方块,放入沸水锅内,加少许细盐,煮沸待用。',
        '将锅烧热,加猪油,投肉末下锅,加姜末、黄酒',
        '营养价值: 豆腐作为食药兼备的食品,具有益气、补虚等多方面的功能',
        '在买猪肉时,拔一根或数根猪毛,仔细看其毛根,如果毛根发红,则是病猪;'
      ]
    }, {
      name: '秘制风味鸡扒',
      list: [
        '首先将鸡腿洗净,去骨,然后将用料表里提到的配料全部放进去,拌匀,进行腌制。',
        ' 热锅下油,将腌制好的鸡扒放入锅中进行煎制。',
        '中火煎至两面金黄且熟透即可。',
        '最后撒上黑胡椒粉【风味鸡扒】就完成了~'
      ]
    },
    {
      name: '烧花鸭',
      list: [
        '鸭子一只,经宰杀后切块,放开水冲',
        '锅放中火上,加油放姜之味去来,放花椒,在放鸭肉,',
        '爆炒大概5分钟,加老抽,水,盐,冰糖盖住鸭肉的水',
        '烧花鸭是一道色香味俱全的地方名菜,属于河北菜。锅放中火上',
        '加油放姜来去味,放花椒,在放鸭肉,爆炒大概5分钟,'
      ]
    },
    {
      name: '清蒸八宝猪',
      list: [
        '肥瘦相间的鲜猪肉2000克',
        '大米粉500克,料酒50克,精盐50克,姜30克,豆腐乳5块,鲜荷叶1张',
        '将猪肉洗净,切成长方块状备用。',
        '取米粉与配料搅拌均匀,将切好的猪肉与米粉配料混合拌匀,置于铺开的荷叶之上。',
        '将盛有粉肉的荷叶放在蒸笼里,并加入老生姜、莲子、马蹄、红枣、鸡精粉, 肉面再盖上荷叶清蒸',
        '肉质细嫩,入口清爽宜人。',
        '一般人都可食用;湿热痰滞内蕴者慎服;肥胖、血脂较高者不宜多食。'
      ]
    },
    {
      name: '红烧肘子',
      list: [
        '去掉猪肘子上的毛洗净。烧开半锅水加入3汤匙料酒和姜片',
        '将猪肘子放入大碗里,倒入1汤匙白糖、3汤匙酱油',
        '把腌好的猪肘子放入微波炉内高火加热5分钟后,放入'
      ]
    }, {
      name: '秘制风味鸡扒',
      list: [
        '首先将鸡腿洗净,去骨,然后将用料表里提到的配料全部放进去,拌匀,进行腌制。',
        ' 热锅下油,将腌制好的鸡扒放入锅中进行煎制。',
        '中火煎至两面金黄且熟透即可。',
        '最后撒上黑胡椒粉【风味鸡扒】就完成了~'
      ]
    },
    {
      name: '烧花鸭',
      list: [
        '鸭子一只,经宰杀后切块,放开水冲',
        '锅放中火上,加油放姜之味去来,放花椒,在放鸭肉,',
        '爆炒大概5分钟,加老抽,水,盐,冰糖盖住鸭肉的水',
        '烧花鸭是一道色香味俱全的地方名菜,属于河北菜。锅放中火上',
        '加油放姜来去味,放花椒,在放鸭肉,爆炒大概5分钟,'
      ]
    },
    {
      name: '秘制风味鸡扒',
      list: [
        '首先将鸡腿洗净,去骨,然后将用料表里提到的配料全部放进去,拌匀,进行腌制。',
        ' 热锅下油,将腌制好的鸡扒放入锅中进行煎制。',
        '中火煎至两面金黄且熟透即可。',
        '最后撒上黑胡椒粉【风味鸡扒】就完成了~'
      ]
    },
    {
      name: '烧花鸭',
      list: [
        '鸭子一只,经宰杀后切块,放开水冲',
        '锅放中火上,加油放姜之味去来,放花椒,在放鸭肉,',
        '爆炒大概5分钟,加老抽,水,盐,冰糖盖住鸭肉的水',
        '烧花鸭是一道色香味俱全的地方名菜,属于河北菜。锅放中火上',
        '加油放姜来去味,放花椒,在放鸭肉,爆炒大概5分钟,'
      ]
    },

  ],
    scrollTops: 0,  // 左边要滚动的高度 
    tabCur: 0,  // 当前项
    rightCur: 0,  // 用于实现左边联动右边
  },
  // 切换左边菜单并联动右边
  tabNav(e) {
    let index = e.currentTarget.dataset.index;
    // console.log(index);
    this.setData({
      tabCur: index,
      rightCur: index,
      // 实现左边自动滑动到某个位置 4表示自动滑动到 第五项 (4为索引值)
      scrollTops: (index - 4) * 50
    })
  },
  /**
   * 滑动右边对应左边菜单切换
   * 1、拿到该元素的高度,设定它的top和bottom
   * 2、判断滑动的距离是否大于 设定的top并小于设定的bottom,然后对应左边菜单的滑动
   */
  scrollLink(e) {
    // console.log(e);
    let list = this.data.list
    let itemHeight = 0;
    for (let i = 0; i < list.length; i++) {
      //拿到每个元素
      let els = wx.createSelectorQuery().select("#scroll-" + i);
      // console.log(els);
      els.fields({
        size: true
      }, function (res) {
        list[i].top = itemHeight; // 节点顶部位置
        itemHeight += res.height;// 节点高度
        list[i].bottom = itemHeight;//节点底部位置
      }).exec()
    }
    this.setData({
      list:list
    })

 
    let scrollTop = e.detail.scrollTop;     // 拿到滚动的高度
    for (let i = 0; i < list.length; i++) {
      console.log(list[i]);
      if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
        this.setData({
          tabCur: i,
          scrollTops: (i - 4) * 50
        })
        return false
      }
    }
  }
})

3,css样式

.link {
  width: 100%;
  height: 100%;
  display: flex;
}

.left {
  width: 220rpx;
  /* 这里的高度可以写也可以不写,效果还是可以实现的,不过最好还是写上吧 */
  height: 100vh;
  background-color: rgb(229, 243, 243);
  text-align: center;
  color: #333;
}

.left .item {
  width: 150rpx;
  /* line-height: 50px; */
  height: 100rpx;
  font-size: 34rpx;
}

.active {
  background-color: tomato;
  color: #fff;
}

.right {
 
  height: 100vh;
  background-color: #f8f8f8;
  padding: 0 30rpx;
}

.right-cont {
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #ccc;
  border: 1rpx solid gold;
}

.title {
  text-align: center;
  font-size: 36rpx;
  color: #333;
  padding-top: 60rpx;
  padding-bottom: 20rpx;
}

.content {
  padding: 0 5rpx 0 20rpx;
}

.list-item{
  font-size: 32rpx;
  color: #333;
  line-height: 50rpx;
}

 

你可能感兴趣的:(小程序)