微信小程序美团商家首页实现

这都2021年了，为啥现在才想起来学微信小程序，晚吗？只要开始永远不算晚。我接触小程序还是比较早的，其中还有一个小插曲；2016年春，春节放假刚刚结束。某天，我和同事聊天，我说：“手机上的App太多了，手机太卡，什么时候能出现一种不用下载的App也可以使用里面的功能”。几个月之后，微信小程序正式开启内测。

小程序内测开启，我就马上去下载了开发工具也看了文档，奈何对于刚毕业的我来说，着实有些头疼，最后就不了了之了。

好了，不闲扯了，最近因为公司业务，需要使用支付宝小程序mPass,在自己App中实现小程序模块功能，在做支付宝小程序的同时空闲时间也把微信小程序学习了一遍。

开发工具

小程序开发工具下载，微信官方的这工具开发的时候不太好用，我都是使用VScode同时配合小程序插件进行开发，使用起来相当爽。在官方开发工具上进行调试工作。

美团小程序商家首页实现

我们以美团商家首页实现为例，来看看小程序是如何开发的

实现分析

WeChat1d30aabebd936bd74299ca0ff689680a.png

实现如图商品分类和商品的联动
左边是一个scroll-view右边也是一个scroll-view,同时根据微信小程序scroll-view文档介绍，设置属性scroll-into-view

值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

就可以找到相对应的视图

代码实现

index.wxml

<view class="page_wrap">
    <!-- 上面 -->
    <view class="top_view_wrap">
        <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{500}}">
            <block wx:for="{{imgUrls}}">
                <swiper-item>
                    <image  mode="scaleToFill" class="swiper-image" src="{{item}}" />
                </swiper-item>
            </block>
        </swiper>
    </view>
    <view class="main_content">
        <!-- 左边 -->
        <scroll-view class="left_scroll_wrap" scroll-y="{{true}}">
            <block wx:for="{{foodData}}" wx:key="id">
                 <view class="{{selectedIndex==index?'left_wrap_selected':'left_wrap_nomal'}}" bindtap='menuHandle' data-index='{{index}}' data-viewNumb='{{item.viewNumb}}'>
                    <!-- <view> -->
                        <text>{{item.foodType}}</text>
                    <!-- </view> -->
                </view>
            </block>
           
        </scroll-view>
        <!-- 右边 -->
        <scroll-view scroll-into-view="{{views}}" class="right_scroll_wrap" scroll-y="{{true}}" bindscroll="scrollhandle" bindscrolltolower='scrolltolower'>
            <view class="right_scroll_item">
                <!-- 显示 列表 头 标题 -->
                <view class="right_item_wrap" wx:for="{{foodData}}" wx:key="id" wx:for-item="bigItem" wx:for-index="section">
                    <!-- 标题 -->
                    <view id="{{bigItem.viewNumb}}" class="right_item_title">{{bigItem.foodType}}</view>
                    <view class="right_item_content" wx:for="{{bigItem.foodList}}" wx:key="id" wx:for-item="smallItem" wx:for-index="row">
                        {{smallItem.foodName}}
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</view>

index.js


  data: {

 imgUrls:[
      'https://seopic.699pic.com/photo/50052/1588.jpg_wh1200.jpg',
      'https://seopic.699pic.com/photo/50161/5020.jpg_wh1200.jpg',
      'https://seopic.699pic.com/photo/50159/2080.jpg_wh1200.jpg',
      'https://seopic.699pic.com/photo/50134/5023.jpg_wh1200.jpg'
    ],

    foodData:[
      {
        foodType:'热销',
        id:'000',
        viewNumb:'view0',
        foodList:[
          {
            foodName:'照烧鸡腿',
            id:'001',
          },
          {
            foodName:'香辣鱿鱼',
            id:'002',
          },
          {
            foodName:'经典酸辣粉',
            id:'003',
          },
          {
            foodName:'鸡蛋',
            id:'004',
          },
          {
            foodName:'凉皮',
            id:'005',
          },
          {
            foodName:'凉皮米皮两掺',
            id:'006',
          },
          {
            foodName:'鲜虾鸡腿',
            id:'007',
          },
          {
            foodName:'自磨豆浆',
            id:'008',
          },
        ]
      },
      {
        foodType:'馅饼',
        id:'001',
        viewNumb:'view1',
        foodList:[
          {
            foodName:'素三鲜',
            id:'001',
          },
          {
            foodName:'照烧鸡腿',
            id:'002',
          },
          {
            foodName:'香辣鱿鱼',
            id:'003',
          },
          {
            foodName:'藤椒鸡腿',
            id:'004',
          },
          {
            foodName:'鲜虾鸡腿',
            id:'005',
          },
          {
            foodName:'叉烧里脊',
            id:'006',
          },
          {
            foodName:'黑椒牛肉',
            id:'007',
          },
          {
            foodName:'酱油汁',
            id:'008',
          },
        ]
      },
      {
        foodType:'酸辣粉',
        id:'002',
        viewNumb:'view2',
        foodList:[
          {
            foodName:'经典酸辣粉',
            id:'001',
          }
        ]
      },
      {
        foodType:'面条',
        id:'003',
        viewNumb:'view3',
        foodList:[
          {
            foodName:'原味米线',
            id:'001',
          },
          {
            foodName:'香菇鸡丁刀削面',
            id:'002',
          },
          {
            foodName:'蜜汁刀削面',
            id:'003',
          },
          {
            foodName:'麻辣面',
            id:'004',
          },
          {
            foodName:'酸辣面',
            id:'005',
          },
          {
            foodName:'肉丝面',
            id:'006',
          },
        ]
      },
      {
        foodType:'混沌',
        id:'004',
        viewNumb:'view4',
        foodList:[
          {
            foodName:'大馅混沌',
            id:'001',
          }
        ]
      },
      {
        foodType:'凉调',
        id:'005',
        viewNumb:'view5',
        foodList:[
          {
            foodName:'凉皮米皮两掺',
            id:'001',
          },
          {
            foodName:'米皮',
            id:'002',
          },
          {
            foodName:'凉皮',
            id:'003',
          }
        ]
      },
      {
        foodType:'暖心饮品',
        id:'006',
        viewNumb:'view6',
        foodList:[
          {
            foodName:'红枣山药粥',
            id:'001',
          },
          {
            foodName:'自磨豆浆',
            id:'002',
          },
          
        ]
      },
      {
        foodType:'饮料',
        id:'007',
        viewNumb:'view7',
        foodList:[
          {
            foodName:'君畅乳酸菌',
            id:'001',
          },
          {
            foodName:'优酸乳',
            id:'002',
          },
          {
            foodName:'矿泉水',
            id:'003',
          },
          {
            foodName:'绿茶',
            id:'004',
          },
          {
            foodName:'奶茶',
            id:'005',
          },
          {
            foodName:'冰红茶',
            id:'006',
          },
          {
            foodName:'芬达',
            id:'007',
          },
          {
            foodName:'雪碧',
            id:'008',
          },
          {
            foodName:'可口可乐',
            id:'009',
          }
        ]
      },
      {
        foodType:'热其他销',
        id:'008',
        viewNumb:'view8',
        foodList:[
          {
            foodName:'鸡蛋',
            id:'001',
          },
          {
            foodName:'豆干',
            id:'002',
          },
          {
            foodName:'蜜汁鸡爪',
            id:'003',
          },
          {
            foodName:'蜜汁鸡腿',
            id:'004',
          }
        ]
      },
    ],
    selectedIndex:0,
    views:'',// 标记 右侧 视频列表的id
    menuItemshigetArr:[],//菜单每项距离顶部的高度 每个item 80rpx
  },
onLoad: function (options) {
    // 根据数据计算出得出 menuItemshigetArr
    let {foodData} = this.data;
    let {menuItemshigetArr} = this.data;

    //总高度
    let total_hight = 0;
    for (let i = 0; i < foodData.length; i++) {
      if (i == 0) {
        menuItemshigetArr.push(0);
      }else{
        var  element = foodData[i-1];
        let foodCount = element.foodList.length;
        let foodHight = foodCount*40;
        total_hight = total_hight + foodHight +40;
  
        console.log(total_hight);
        menuItemshigetArr.push(total_hight);
      }
    }

    console.log(menuItemshigetArr);
  },

  menuHandle(e){
    let index = e.currentTarget.dataset.index;
    //console.log(index);
    let viewNumb = 'view'+index; //e.currentTarget.dataset.viewnumb;
    let {views} = this.data;
    let {selectedIndex} = this.data;
   
    selectedIndex = index;

    console.log(index);
    console.log(selectedIndex);

    // selectedIndex = index;
   views = viewNumb;
    this.setData({
      views,
      selectedIndex
    });
  },
  // 滚动右边 实物列表
  scrollhandle(e){
    let {menuItemshigetArr} = this.data;
    let currentY=e.detail.scrollTop;

    // console.log(currentY);

    for (let i = 0; i < menuItemshigetArr.length; i++) {
      let heightBottom = menuItemshigetArr[I];
      let heightTop = menuItemshigetArr[i + 1]; 

      // console.log(heightBottom);
      // console.log(heightTop);
      //判断currentY当前所在的区间
      // 最后一项 currentY = 1556
      // 1440 - 1840
      if (currentY < heightTop && currentY >= heightBottom) {
        this.setData({
          selectedIndex:i
        }); 
      }
    }
  },
  // scroll 滚动到 底部 设置selectedIndex 为 最后一项
  scrolltolower(e){

    let {menuItemshigetArr} = this.data;
    console.log(e);
    let type = e.detail.direction;
    if (type==='bottom') {
      this.setData({
        selectedIndex:(menuItemshigetArr.length-1)
      }); 
    }
  },

index.wxss

page {
  background-color: #f3f3f3;
}
.page_wrap {
  position: relative;
}
.page_wrap .top_view_wrap {
  height: 30vh;
  background-color: #f6fa0b;
}
.page_wrap .top_view_wrap swiper {
  height: 30vh;
}
.page_wrap .top_view_wrap swiper swiper-item .swiper-image {
  height: 30vh;
  width: 100%;
}
.page_wrap .main_content {
  display: flex;
  height: 70vh;
}
.page_wrap .main_content .left_scroll_wrap {
  flex: 1;
}
.page_wrap .main_content .left_scroll_wrap .left_wrap_nomal {
  display: flex;
  height: 80rpx;
  align-items: center;
  justify-content: center;
}
.page_wrap .main_content .left_scroll_wrap .left_wrap_selected {
  display: flex;
  height: 80rpx;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
.page_wrap .main_content .right_scroll_wrap {
  flex: 3;
  background-color: #fff;
  padding-left: 20rpx;
}
.page_wrap .main_content .right_scroll_wrap .right_scroll_item .right_item_wrap .right_item_title {
  display: flex;
  height: 80rpx;
  align-items: center;
  background-color: #fff;
  font-weight: bold;
}
.page_wrap .main_content .right_scroll_wrap .right_scroll_item .right_item_wrap .right_item_content {
  height: 80rpx;
  display: flex;
  align-items: center;
}