微信小程序左边菜单栏

WXML

<view class='big-box'>

  <view class='left-menu'>

    <block wx:for="{{dataList}}" wx:key="key">
    
      <view class='{{index == idx ? "avtive":"Default-Class"}}' bindtap="switchClassfun" data-index="{{index}}">{{item.title}}</view>

    </block>

  </view>

  <view style='width:73%;'>

    <scroll-view 
      class='scrollclass' 
      scroll-y="true" 
      scroll-with-animation="true" 
      enable-back-to-top="true" 
      scroll-into-view="{{toView}}" 
      scroll-top="{{scrollTop}}" 
      bindscroll="bindscrollfunc">

      <block wx:for="{{dataList}}" wx:for-item="item" wx:key="key">

        <view class='scroll-box position' id="position{{index}}" data-index="{{index}}">

          <view class='title'>{{item.title}}</view>

            <block wx:for="{{item.products}}" wx:for-item="items" wx:key="key">

              <view class='scroll-box-product-box'>
              
                <image src='{{items.img}}' class='product-img'></image>

                <view class='product-info-box'>
                
                  <view class='product-name'>{{items.name}}</view>

                  <view class='product-English-name'>{{items.englisgname}}</view>

                  <view class='product-price'>￥{{items.price}}</view>
                
                </view>

              </view>

            </block>

        </view>

      </block>

    </scroll-view>

  </view>

</view>

WXSS

page{
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.big-box{
  border-top: 2rpx solid #F7F7F7;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.big-box .left-menu{
  width: 27%;
  background: #F7F7F7;
  height: 100%;
}

.Default-Class{
  padding: 26rpx 0;
  font-size: 28rpx;
  text-align: center;
  border-bottom: 1rpx solid #E2E2E2;
  border-left: 8rpx solid #F7F7F7;
}

.scrollclass{
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scroll-box .title{
  padding: 26rpx 20rpx;
  font-size: 28rpx;
  text-align: left;
}

.scroll-box-product-box{
  display: flex;
  justify-content: space-between;
  width: 94%;
  margin: auto;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #E2E2E2;
}

.scroll-box-product-box .product-img{
  width: 140rpx;
  height: 140rpx;
  border-radius: 10rpx;
}

.scroll-box-product-box .product-info-box{
  width: 70%;
  position: relative;
}

.scroll-box-product-box .product-info-box .product-name{
  font-weight: 600;
  color: #333;
  font-size: 30rpx;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scroll-box-product-box .product-info-box .product-English-name{
  color: #666;
  font-size: 24rpx;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scroll-box-product-box .product-price{
  font-weight: 600;
  color: #333;
  font-size: 30rpx;
  position: absolute;
  bottom: 0rpx;
}

.avtive{
  padding: 26rpx 0;
  background: #fff;
  border-left: 8rpx solid #89A0D2;
  color: #333;
  text-align: center;
  font-weight: 600;
  font-size: 28rpx;
}

js

const dataList = require("dataList.js");

var that = '';

var query;

Page({

  data: {

    dataList: [],

    idx: 0,

    scrollTop: 0,

    toView:'position0'

  },


  onLoad: function (options) {

    that = this;

    this.setData({ dataList: dataList.dataList })

    query = wx.createSelectorQuery();

    wx.createSelectorQuery().selectAll('.position').boundingClientRect(function (rects) {

      that.setData({ positions:rects })

    }).exec();

  },


  switchClassfun(e){

    var e = e.currentTarget.dataset.index;

    this.setData({ idx: e, toView: 'position' + e })

  },


  bindscrollfunc(e){

    var arr = [];

    for(var item of this.data.positions){

      if (item.top <= e.detail.scrollTop + 2){

        arr.push(item)

      }

    }

    this.setData({ idx:arr[arr.length-1].dataset.index })
  },

})

json

{

  "backgroundColor": "#F7F7F7",

  "navigationBarBackgroundColor": "#fff",

  "navigationBarTitleText": "左边菜单栏",

  "navigationBarTextStyle": "black",

  "disableScroll":true
  
}

数据文件

var dataList = [
  {

    title: '人气Top',

    products: [

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '卡布奇诺瑞纳冰',
        englisgname: 'Cappuccine Exfreezo',
        price: '27'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '橘金气泡美式',
        englisgname: 'Mandarine Soda Americano',
        price: '24'
      },

    ]

  },
  {

    title: '大师咖啡',

    products: [

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '拿铁',
        englisgname: 'Latte',
        price: '24'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '香草拿铁',
        englisgname: 'Yanilla Latte',
        price: '27'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '焦糖拿铁',
        englisgname: 'Caramel Latte',
        price: '27'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '楱果拿铁',
        englisgname: 'Hazelnut Latte',
        price: '27'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '标准美式',
        englisgname: 'Americano',
        price: '21'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '加浓美式',
        englisgname: 'Extra Americano',
        price: '24'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '焦糖标准美式',
        englisgname: 'Caramel Americano',
        price: '24'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '焦糖加浓美式',
        englisgname: 'Caramel Extra Americano',
        price: '27'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '橘金气泡美式',
        englisgname: 'Mandarine Soda Americano',
        price: '24'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '黑金气泡美式',
        englisgname: 'Black Gold Soda Americano',
        price: '24'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '奥瑞白',
        englisgname: 'Flat White',
        price: '27'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '卡布奇诺',
        englisgname: 'Cappuccino',
        price: '24'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '焦糖玛奇朵',
        englisgname: 'Caramel Macchiato',
        price: '27'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '摩卡',
        englisgname: 'Mocha',
        price: '27'
      },

    ]

  },
  {

    title: '小鹿差',

    products: [

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '桃桃芝士红宝石茶',
        englisgname: 'Peach Cheese Ruby Tea',
        price: '27'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '西柚芝士茉香茶',
        englisgname: 'Grapefruit Cheese Jasmine Tea',
        price: '27'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '草莓芝士茉香茶',
        englisgname: 'Strawberry Cheese Jasmine Tea',
        price: '27'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '红茶拿铁',
        englisgname: 'Black Tea Latte',
        price: '27'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '抹茶拿铁',
        englisgname: 'Matcha Latte',
        price: '27'
      },

    ]

  },
  {

    title: '瑞纳冰',

    products: [

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '小雪荔枝瑞纳冰',
        englisgname: 'Lychee Exfreezo',
        price: '27'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '宇治抹茶瑞纳冰',
        englisgname: 'Uji Matcha Exfreezo',
        price: '27'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '卡布奇诺瑞纳冰',
        englisgname: 'Cappuccion Exfreezo',
        price: '27'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '百香芒果瑞纳冰',
        englisgname: 'Passionfruit Mango Exfreezo',
        price: '27'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '巧克力瑞纳冰',
        englisgname: 'Chocolate Exfreezo',
        price: '27'
      },

    ]

  },
  {

    title: '鲜榨果蔬汁',

    products: [

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: 'NFC鲜榨橙汁',
        englisgname: 'NFC Fresh Orange Juice',
        price: '24'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '猕猴桃复合果汁',
        englisgname: 'UKiwifruit Juice',
        price: '24'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: 'NFC鲜榨蓝莓草莓混合果汁',
        englisgname: 'NFC Fresh Blueberry & Strawberry Juice',
        price: '24'
      },

    ]

  },
  {

    title: '经典饮品',

    products: [

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '石榴蔓越莓苏打水',
        englisgname: 'Pomegranate Cranberry Soda Water',
        price: '21'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '巧克力',
        englisgname: 'Chocolate Milk',
        price: '24'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '纯牛奶',
        englisgname: 'Milk',
        price: '21'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '依云矿泉水330ml',
        englisgname: 'Evian',
        price: '18'
      },

    ]

  },
  {

    title: 'BOSS午餐',

    products: [

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '夏日柠檬风味鸡肉沙拉',
        englisgname: 'Pomegranate Cranberry Soda Water',
        price: '25.08'
      },

    ]

  },
  {

    title: '健康轻食',

    products: [

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '京味烤鸭鲜蔬卷（单卷）',
        englisgname: 'Duck & Vegetable Wrap',
        price: '9.9'
      },
      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '夏威夷菠萝火腿卷（单卷）',
        englisgname: 'Duck & Vegetable Wrap',
        price: '8.58'
      },
      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '意大利烤鸡卷（单卷）',
        englisgname: 'Duck & Vegetable Wrap',
        price: '8.58'
      },
      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '蓝莓麦芬',
        englisgname: 'Duck & Vegetable Wrap',
        price: '8.58'
      },
      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '芝士蓝莓蛋糕',
        englisgname: 'Duck & Vegetable Wrap',
        price: '16.5'
      },
      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '提拉米苏蛋糕',
        englisgname: 'Tiramisu Cake',
        price: '16.5'
      },
      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '蛋香火腿芝士三明治',
        englisgname: 'Egg Ham and Cheese Sandwich',
        price: '11.88'
      },
      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '尼斯吞拿鱼三明治',
        englisgname: 'Nice Tuna Sandwich',
        price: '11.88'
      },

    ]

  },
  {

    title: '幸运小食',

    products: [

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: 'Beatz冻干黄桃脆片',
        englisgname: 'Beatz Freeze Dried Peach Chips',
        price: '8.58'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '迷你蛋糕卷（牛奶味）',
        englisgname: 'Mini Baumroll Milk Taste',
        price: '8.58'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '迷你蛋糕卷（巧克力味）',
        englisgname: 'Mini Baumroll Chocolate Taste',
        price: '8.58'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '经典有机甘栗仁',
        englisgname: 'Organic Chestnut Kernel',
        price: '9.9'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '威化黑巧克力',
        englisgname: 'Nestle KitKat Dark Chocolate',
        price: '9.9'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '扁桃仁脆巧克力味饼干',
        englisgname: 'Pocky Almond Crush Teste',
        price: '9.9'
      },

      {
        img:'http://n.sinaimg.cn/translate/200/w1080h720/20180724/-_fe-hftenhz3076352.jpg',
        name: '燕麦紫薯沙琪玛',
        englisgname: 'DEMAE ICCHO Crisp CHOCO',
        price: '11.88'
      },

    ]

  },
];

exports.dataList = dataList;