微信小程序左边菜单栏

最新推荐文章于 2023-04-11 13:46:14 发布

qq_42699996

最新推荐文章于 2023-04-11 13:46:14 发布

阅读量7k

点赞数 14

分类专栏：前端文章标签：微信小程序小程序微信小程序菜单左边栏微信小程序左边栏菜单菜单栏

本文链接：https://blog.csdn.net/qq_42699996/article/details/90699989

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

在这里插入图片描述

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

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;

qq_42699996

关注

14
点赞
踩
49

收藏

觉得还不错? 一键收藏
13
评论
微信小程序左边菜单栏

WXML<view class='big-box'> <view class='left-menu'> <block wx:for="{{dataList}}" wx:key="key"> <view class='{{index == idx ? "avtive":"Default-Class"}}' bindt...
复制链接

扫一扫