這都2021年了捂贿，為啥現(xiàn)在才想起來(lái)學(xué)微信小程序纠修，晚嗎？只要開(kāi)始永遠(yuǎn)不算晚厂僧。我接觸小程序還是比較早的扣草，其中還有一個(gè)小插曲；2016年春颜屠，春節(jié)放假剛剛結(jié)束辰妙。某天，我和同事聊天甫窟，我說(shuō)：“手機(jī)上的App太多了密浑，手機(jī)太卡，什么時(shí)候能出現(xiàn)一種不用下載的App也可以使用里面的功能”粗井。幾個(gè)月之后尔破，微信小程序正式開(kāi)啟內(nèi)測(cè)。

小程序內(nèi)測(cè)開(kāi)啟背传，我就馬上去下載了開(kāi)發(fā)工具也看了文檔呆瞻，奈何對(duì)于剛畢業(yè)的我來(lái)說(shuō)，著實(shí)有些頭疼径玖，最后就不了了之了痴脾。

好了，不閑扯了梳星，最近因?yàn)楣緲I(yè)務(wù)赞赖，需要使用支付寶小程序mPass,在自己App中實(shí)現(xiàn)小程序模塊功能，在做支付寶小程序的同時(shí)空閑時(shí)間也把微信小程序?qū)W習(xí)了一遍冤灾。

開(kāi)發(fā)工具

小程序開(kāi)發(fā)工具下載前域，微信官方的這工具開(kāi)發(fā)的時(shí)候不太好用，我都是使用VScode同時(shí)配合小程序插件進(jìn)行開(kāi)發(fā)韵吨，使用起來(lái)相當(dāng)爽匿垄。在官方開(kāi)發(fā)工具上進(jìn)行調(diào)試工作。

美團(tuán)小程序商家首頁(yè)實(shí)現(xiàn)

我們以美團(tuán)商家首頁(yè)實(shí)現(xiàn)為例归粉，來(lái)看看小程序是如何開(kāi)發(fā)的

• 實(shí)現(xiàn)分析

  
  
  WeChat1d30aabebd936bd74299ca0ff689680a.png

實(shí)現(xiàn)如圖 商品分類(lèi)和商品的聯(lián)動(dòng)
左邊是一個(gè)scroll-view右邊也是一個(gè)scroll-view,同時(shí)根據(jù)微信小程序scroll-view文檔介紹椿疗，設(shè)置屬性scroll-into-view

值應(yīng)為某子元素id（id不能以數(shù)字開(kāi)頭）。設(shè)置哪個(gè)方向可滾動(dòng)糠悼，則在哪個(gè)方向滾動(dòng)到該元素

就可以找到相對(duì)應(yīng)的視圖

代碼實(shí)現(xiàn)

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">
                <!-- 顯示 列表 頭 標(biāo)題 -->
                <view class="right_item_wrap" wx:for="{{foodData}}" wx:key="id" wx:for-item="bigItem" wx:for-index="section">
                    <!-- 標(biāo)題 -->
                    <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:'熱銷(xiāo)',
        id:'000',
        viewNumb:'view0',
        foodList:[
          {
            foodName:'照燒雞腿',
            id:'001',
          },
          {
            foodName:'香辣魷魚(yú)',
            id:'002',
          },
          {
            foodName:'經(jīng)典酸辣粉',
            id:'003',
          },
          {
            foodName:'雞蛋',
            id:'004',
          },
          {
            foodName:'涼皮',
            id:'005',
          },
          {
            foodName:'涼皮米皮兩摻',
            id:'006',
          },
          {
            foodName:'鮮蝦雞腿',
            id:'007',
          },
          {
            foodName:'自磨豆?jié){',
            id:'008',
          },
        ]
      },
      {
        foodType:'餡餅',
        id:'001',
        viewNumb:'view1',
        foodList:[
          {
            foodName:'素三鮮',
            id:'001',
          },
          {
            foodName:'照燒雞腿',
            id:'002',
          },
          {
            foodName:'香辣魷魚(yú)',
            id:'003',
          },
          {
            foodName:'藤椒雞腿',
            id:'004',
          },
          {
            foodName:'鮮蝦雞腿',
            id:'005',
          },
          {
            foodName:'叉燒里脊',
            id:'006',
          },
          {
            foodName:'黑椒牛肉',
            id:'007',
          },
          {
            foodName:'醬油汁',
            id:'008',
          },
        ]
      },
      {
        foodType:'酸辣粉',
        id:'002',
        viewNumb:'view2',
        foodList:[
          {
            foodName:'經(jīng)典酸辣粉',
            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:'涼調(diào)',
        id:'005',
        viewNumb:'view5',
        foodList:[
          {
            foodName:'涼皮米皮兩摻',
            id:'001',
          },
          {
            foodName:'米皮',
            id:'002',
          },
          {
            foodName:'涼皮',
            id:'003',
          }
        ]
      },
      {
        foodType:'暖心飲品',
        id:'006',
        viewNumb:'view6',
        foodList:[
          {
            foodName:'紅棗山藥粥',
            id:'001',
          },
          {
            foodName:'自磨豆?jié){',
            id:'002',
          },
          
        ]
      },
      {
        foodType:'飲料',
        id:'007',
        viewNumb:'view7',
        foodList:[
          {
            foodName:'君暢乳酸菌',
            id:'001',
          },
          {
            foodName:'優(yōu)酸乳',
            id:'002',
          },
          {
            foodName:'礦泉水',
            id:'003',
          },
          {
            foodName:'綠茶',
            id:'004',
          },
          {
            foodName:'奶茶',
            id:'005',
          },
          {
            foodName:'冰紅茶',
            id:'006',
          },
          {
            foodName:'芬達(dá)',
            id:'007',
          },
          {
            foodName:'雪碧',
            id:'008',
          },
          {
            foodName:'可口可樂(lè)',
            id:'009',
          }
        ]
      },
      {
        foodType:'熱其他銷(xiāo)',
        id:'008',
        viewNumb:'view8',
        foodList:[
          {
            foodName:'雞蛋',
            id:'001',
          },
          {
            foodName:'豆干',
            id:'002',
          },
          {
            foodName:'蜜汁雞爪',
            id:'003',
          },
          {
            foodName:'蜜汁雞腿',
            id:'004',
          }
        ]
      },
    ],
    selectedIndex:0,
    views:'',// 標(biāo)記 右側(cè) 視頻列表的id
    menuItemshigetArr:[],//菜單每項(xiàng)距離頂部的高度 每個(gè)item 80rpx
  },
onLoad: function (options) {
    // 根據(jù)數(shù)據(jù)計(jì)算出得出 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
    });
  },
  // 滾動(dòng)右邊 實(shí)物列表
  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當(dāng)前所在的區(qū)間
      // 最后一項(xiàng) currentY = 1556
      // 1440 - 1840
      if (currentY < heightTop && currentY >= heightBottom) {
        this.setData({
          selectedIndex:i
        }); 
      }
    }
  },
  // scroll 滾動(dòng)到 底部 設(shè)置selectedIndex 為 最后一項(xiàng)
  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;
}