better-scroll实现饿了么效果

已于 2023-02-17 13:56:17 修改
阅读量4.2k 收藏 8
点赞数
分类专栏： vue 文章标签： javascript 前端 css
于 2018-03-09 15:03:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40204835/article/details/79497576
版权

 今天看了下饿了么代码  感觉还是很简单的 主要是插件不错

点击打开链接

    下面是效果图  点击对应的tab滚动切页 （复制代码就能用）

以下是代码： 自己改了一下感觉还不错 不懂的js代码对应给了注释

​
<template>
  <div class="layout">
     
    <!-- S tab -->
    <div class="tab">
      <div v-for="(item, index) in tabList" :class="['tab-item']">
        <router-link to="" :class="{ link: index == pageNum }">
          {{ item }}
        </router-link>
      </div>
    </div>
    <!-- E tab -->
     
    <!-- S 内容区域 -->
    <div class="content1">
       
      <!-- S 左侧边栏 -->
      <div class="menu-wrapper" ref="menuWrapper">
        <ul>
          <li
            v-for="(item, index) in goodList"
            class="menu-item border-1px"
            :class="{ current: currentIndex === index }"
            @click="selectMenu(index, $event)"
            :key="index"
          >
            <span class="text">
              <span
                v-show="item.type > 0"
                class="icon"
                :class="classMap[item.type]"
              ></span
              >{{ item.name }}
            </span>
          </li>
        </ul>
      </div>
      <!-- E 左侧边栏 -->
      <!-- S 右侧边栏 -->
      <div class="foods-wrapper" ref="foodWrapper">
        <ul>
          <li
            v-for="(item, call) in goodList"
            class="food-list food-list-hook"
            :key="call"
          >
            <h1 class="title">{{ item.name }}</h1>
            <ul>
              <li
                v-for="(food, inl) in item.foods"
                class="food-item"
                @click="selectFood(food, $event)"
                :key="inl"
              >
                <div class="icon">
                  <img :src="food.icon" alt="" width="57" />
                </div>
                <div class="content">
                  <h2 class="name">{{ food.name }}</h2>
                  <p class="desc">{{ food.description }}</p>
                  <div class="extra">
                    <span class="count">月售{{ food.sellCount }}</span
                    ><span class="count">好评{{ food.rating }}</span>
                  </div>
                  <div class="price">
                    <span class="now">￥{{ food.price }}</span
                    ><span class="old" v-show="food.oldPrice"
                      >￥{{ food.oldPrice }}</span
                    >
                  </div>
                  <div class="cartControl-wrapper">
                    <!-- <cartControl :food="food" @increment="incrementTotal"></cartControl> -->
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- E 右侧边栏 -->
       
    </div>
    <!-- E 内容区域 -->
  </div>
</template>
 
<script>
import BScroll from "better-scroll"; // 使用better-scrol实现滑动
export default {
  data() {
    return {
      tabList: ["列表", "详情"],
      pageNum: 0,
      listHeight: [],
      scrolly: 0, // 滚动处始值
      goodList: [
        {
          name: "热销榜",
          type: -1,
          foods: [
            {
              name: "皮蛋瘦肉粥",
              price: 10,
              oldPrice: "",
              description: "咸粥",
              sellCount: 229,
              rating: 100,
              info: "一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "很喜欢的粥",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 1,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "扁豆焖面",
              price: 14,
              oldPrice: "",
              description: "",
              sellCount: 188,
              rating: 96,
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 1,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              info: "",
              icon: "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "葱花饼",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 124,
              rating: 85,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "没啥味道",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 1,
                  text: "很一般啊",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "牛肉馅饼",
              price: 14,
              oldPrice: "",
              description: "",
              sellCount: 114,
              rating: 91,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "难吃不推荐",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "招牌猪肉白菜锅贴/10个",
              price: 17,
              oldPrice: "",
              description: "",
              sellCount: 101,
              rating: 78,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "不脆,不好吃",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "南瓜粥",
              price: 9,
              oldPrice: "",
              description: "甜粥",
              sellCount: 91,
              rating: 100,
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "红豆薏米美肤粥",
              price: 12,
              oldPrice: "",
              description: "甜粥",
              sellCount: 86,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "八宝酱菜",
              price: 4,
              oldPrice: "",
              description: "",
              sellCount: 84,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "红枣山药糙米粥",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 81,
              rating: 91,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "糊塌子",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 80,
              rating: 93,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750",
            },
          ],
        },
        {
          name: "单人精彩套餐",
          type: 2,
          foods: [
            {
              name: "红枣山药粥套餐",
              price: 29,
              oldPrice: 36,
              description:
                "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注",
              sellCount: 17,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750",
            },
          ],
        },
        {
          name: "冰爽饮品限时特惠",
          type: 1,
          foods: [
            {
              name: "VC无限橙果汁",
              price: 8,
              oldPrice: 10,
              description: "",
              sellCount: 15,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "还可以",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750",
            },
          ],
        },
        {
          name: "精选热菜",
          type: -1,
          foods: [
            {
              name: "娃娃菜炖豆腐",
              price: 17,
              oldPrice: "",
              description: "",
              sellCount: 43,
              rating: 92,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "菜量还可以,味道还可以",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "手撕包菜",
              price: 16,
              oldPrice: "",
              description: "",
              sellCount: 29,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "香酥黄金鱼/3条",
              price: 11,
              oldPrice: "",
              description: "",
              sellCount: 15,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/750/h/750",
            },
          ],
        },
        {
          name: "爽口凉菜",
          type: -1,
          foods: [
            {
              name: "八宝酱菜",
              price: 4,
              oldPrice: "",
              description: "",
              sellCount: 84,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "拍黄瓜",
              price: 9,
              oldPrice: "",
              description: "",
              sellCount: 28,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/750/h/750",
            },
          ],
        },
        {
          name: "精选套餐",
          type: -1,
          foods: [
            {
              name: "红豆薏米粥套餐",
              price: 37,
              oldPrice: "",
              description: "红豆薏米粥,三鲜干蒸烧卖,拍黄瓜",
              sellCount: 3,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "皮蛋瘦肉粥套餐",
              price: 31,
              oldPrice: "",
              description: "",
              sellCount: 12,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/750/h/750",
            },
          ],
        },
        {
          name: "果拼果汁",
          type: -1,
          foods: [
            {
              name: "蜜瓜圣女萝莉杯",
              price: 6,
              oldPrice: "",
              description: "",
              sellCount: 1,
              rating: "",
              info: "",
              ratings: [],
              icon: "http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "加多宝",
              price: 6,
              oldPrice: "",
              description: "",
              sellCount: 7,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "VC无限橙果汁",
              price: 8,
              oldPrice: 10,
              description: "",
              sellCount: 15,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "还可以",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750",
            },
          ],
        },
        {
          name: "小吃主食",
          type: -1,
          foods: [
            {
              name: "扁豆焖面",
              price: 14,
              oldPrice: "",
              description: "",
              sellCount: 188,
              rating: 96,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 1,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "葱花饼",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 124,
              rating: 85,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "没啥味道",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 1,
                  text: "很一般啊",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "牛肉馅饼",
              price: 14,
              oldPrice: "",
              description: "",
              sellCount: 114,
              rating: 91,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "难吃不推荐",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "招牌猪肉白菜锅贴/10个",
              price: 17,
              oldPrice: "",
              description: "",
              sellCount: 101,
              rating: 78,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "不脆,不好吃",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "糊塌子",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 80,
              rating: 93,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750",
            },
          ],
        },
        {
          name: "特色粥品",
          type: -1,
          foods: [
            {
              name: "皮蛋瘦肉粥",
              price: 10,
              oldPrice: "",
              description: "咸粥",
              sellCount: 229,
              rating: 100,
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "很喜欢的粥",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 1,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "南瓜粥",
              price: 9,
              oldPrice: "",
              description: "甜粥",
              sellCount: 91,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "红豆薏米美肤粥",
              price: 12,
              oldPrice: "",
              description: "甜粥",
              sellCount: 86,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "红枣山药糙米粥",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 81,
              rating: 91,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "鲜蔬菌菇粥",
              price: 11,
              oldPrice: "",
              description: "咸粥",
              sellCount: 56,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/750/h/750",
            },
            {
              name: "田园蔬菜粥",
              price: 10,
              oldPrice: "",
              description: "咸粥",
              sellCount: 33,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
                },
              ],
              icon: "http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/750/h/750",
            },
          ],
        },
      ], // 模拟一些假数据
    };
  },
  created() {
    // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
    this.$nextTick(() => {
      this._initScroll();
      this._calculateHeight();
    });
    this.classMap = ["decrease", "discount", "special", "invoice", "guarantee"];
  },
  computed: {
    currentIndex() {
      //计算到达哪个区域的区间的时候的对应的索引值
      for (let i = 0; i < this.listHeight.length; i++) {
        let height = this.listHeight[i]; //当前menu子块的高度
        let height2 = this.listHeight[i + 1]; //下一个menu子块的高度
        //滚动到底部的时候,height2为undefined,需要考虑这种情况
        //需要确定是在两个menu子块的高度区间
        if (!height2 || (this.scrolly >= height && this.scrolly < height2)) {
          return i; //返回这个menu子块的索引
        }
      }
      return 0;
    },
  },
  methods: {
    //初始化scroll区域
    _initScroll() {
      this.menuScroll = new BScroll(this.$refs.menuWrapper, {
        click: true, //结合BScroll的接口使用,是否将click事件传递,默认被拦截了
      });
      this.foodScroll = new BScroll(this.$refs.foodWrapper, {
        probeType: 3, //结合BScroll的接口使用,3实时派发scroll事件，探针的作用
        click: true,
      });
      //结合BScroll的接口使用,监听scroll事件(实时派发的),并获取鼠标坐标，当滚动时能实时暴露出scroll
      this.foodScroll.on("scroll", (pos) => {
        this.scrolly = Math.abs(Math.round(pos.y)); //滚动坐标会出现负的,并且是小数,所以需要处理一下，实时取得scrollY
      });
    },
    _calculateHeight() {
      let foodList =
        this.$refs.foodWrapper.getElementsByClassName("food-list-hook"); //获取每一个food的dom对象
      let height = 0;
      this.listHeight.push(height); //初始化第一个高度为0
      for (let i = 0; i < foodList.length; i++) {
        let item = foodList[i]; //每一个item都是刚才获取的food的每一个dom
        height += item.clientHeight; //主要是为了获取每一个foods内部块的高度
        this.listHeight.push(height);
      }
    },
    selectMenu(index, event) {
      if (!event._constructed) {
        //去掉自带的click事件点击，即pc端直接返回
        return;
      }
      // debugger;
      let foodList =
        this.$refs.foodWrapper.getElementsByClassName("food-list-hook");
      let el = foodList[index];
      //类似jump to的功能,通过这个方法,跳转到指定的dom
      this.foodScroll.scrollToElement(el, 300);
    },
  },
};
</script>
 
<style lang="scss" scoped>
.layout {
width: 100%;
.tab {
width: 100%;
height: 40px;
display: flex;
background-color: skyblue;
.tab-item {
flex: 1;
align-self: center; // 弹性子元素剧中
text-align: center;
a {
color: black;
text-decoration: none;
-webkit-tap-highlight-color:rgba(0,0,0,0); // 去除a标签点击时高亮背景
&.link {
color: red;
}
}
}
}
.content1 {
display: flex;
position: absolute;
top: 44px;
bottom: 46px;
width: 100%;
overflow: hidden;
.menu-wrapper {
flex: 0 0 80px;
width: 80px;
background: #f3f5f7;
.menu-item {
display: table;
width: 56px;
height: 54px;
line-height: 14px;
padding: 0 12px;
&.current {
position: relative;
z-index: 10;
margin-top: -1px;
background: #fff;
font-weight: 700;
.text {
&:after{
display: none
}
}
}
.icon {
display: inline-block;
width: 12px;
height: 12px;
vertical-align: top;
margin-right: 4px;
background-size: 12px 12px;
background-repeat: no-repeat;
&.decrease {
background-image: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=594559231,2167829292&fm=27&gp=0.jpg);
}
&.discount {
background-image: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3044191397,2911599132&fm=27&gp=0.jpg);
 
}
&.guarantee {
background-image: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1944805937,3724010146&fm=27&gp=0.jpg);
}
&.invoice {
background-image: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=147015573,3182587356&fm=27&gp=0.jpg);
 
}
&.special {
background-image: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1046983545,2051560208&fm=27&gp=0.jpg);
 
}
}
.text {
display: table-cell;
width: 56px;
vertical-align: middle;
position: relative;
font-size: 12px;
&:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
border-top: 1px solid red;
width: 100%;
content: '';
}
}
}
}
.foods-wrapper {
flex: 1;
.food-list {
.title {
padding-left: 14px;
height: 26px;
line-height: 26px;
border-left: 2px solid #d9dde1;
font-size: 12px;
color: rgb(147, 153, 159);
background: #f3f5f7;
}
.food-item {
display: flex;
margin: 18px;
padding-bottom: 18px;
&:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
border-top: 1px solid red;
width: 100%;
content: '';
}
&:last-child {
&:after{
display: none
}
}
.icon {
flex: 0 0 57px;
margin-right: 10px;
}
.content {
flex: 1;
.name {
margin: 2px 0 8px 0;
font-size: 14px;
line-height: 14px;
height: 14px;
color: rgb(7, 17, 27);
}
.desc, .extra {
font-size: 10px;
line-height: 10px;
color: rgb(147, 153, 159);
}
.desc {
margin-bottom: 8px;
line-height: 12px;
}
.extra {
.count {
margin-right: 12px;
}
}
.price {
font-weight: 700px;
line-height: 24px;
.now {
margin-right: 8px;
font-size: 14px;
color: rgb(240, 20, 20);
}
.old {
font-size: 10px;
color: rgb(147, 153, 159);
text-decoration: line-through;
}
}
.cartControl-wrapper {
position: absolute;
right: 0;
bottom: 12px;
 
}
}
}
}
}
}
}
</style>
​

彻夜不归
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue-eleme-app：:hamburger:Vue2编写的高仿饿了么WebAPP
02-05
Vue高仿饿了么APP 使用[email protected]开发的高仿饿了么APP（用户端） 主要依赖 基于[email protected] 使用[email protected]构建项目框架 使用[email protected]进行页面路由切换 使用[email protected]进行http请求获取数据 模拟假数据存储在本地 使用stylus编写样式 使用eslint进行js代码的规范， 使用进行联动滑动 在线预览 （PC端建议开启chrome调试模式食用更佳，移动端直接在浏览器开启即可） 构建设置 # clone the repo into your disk. $ git clone https://github.com/cccyb
vue-elm-seller:高仿饿了么商家店铺的单页面应用
05-30
vue-elm-seller 线上预览 安装依赖 npm install 开启一个具有热重载功能的开发服务器 npm run serve 构建项目 npm run build 主要功能 商品菜单联动导航展示 添加移除商品到购物车 购物车商品列表 清空购物车 确认支付提示 查看商品详情 商品评价 店铺综合评论 商家信息展示 商家收藏 商家详情弹窗 商品滚动列表菜单标题吸顶 添加商品到购物车时的动画效果 项目整体优化 技术栈 vue better-scroll lib-flexible axios express node javascript less css es6/7 webpack vue-cli 项目目录 ├── public │ ├── data // 服务端接口数据 │ │ ├── goods.json │ │ ├── ratings.json │
vue_project-wm:Vue的实践项目——仿饿了么外卖
05-30
仿饿了么的vue项目 项目启动： npm install 下载模块 npm start 启动项目 下载配合该项目的后台项目vm-server util的sms_util中加入自己使用的容联云id、令牌等信息，此处因个人信息并未上传 之后步骤同1、2，启动后台服务器 描述 目前是无错误的稳定版本，已将eslint的提示错误也修正了。 第三方库的使用： mintUI构建界面，better-scroll库实现页面滑动 使用vue-router开发单页应用 使用axios向后台发送请求，使用mockjs模拟后台数据接口 使用vuex管理组件共享数据 已实现的功能有： 账号密码登陆或手机号验证码登陆 首页轮播、商家列表及总购物车 商家商品、评价、信息界面展现，实现购物车加购功能 刷新购物车数据保存的功能 也许还有一些错误或者可以优化的地方，欢迎和我交流，共同学习，一起改进。
饿了么订餐网项目页面
11-04
饿了么订餐网项目页面，里面包含了超级全的页面代码，包括了404错误页面，还有js与css样式。
react-eleme:模仿饿了么webapp
05-13
React版高仿饿了么webApp 说明 此项目部分数据接口需要手机登陆后才能访问,我是在mac上开发的,并且只在chrome和safari以及自己的iphone上简单浏览测试了下,如果有什么问题欢迎提出:face_savoring_food:,启动后webpack的warning是因为使用的postcss-viewport-units适配vw,wh,vmin,vmax后会在css的content的打上viewport-units-buggyfill, 所以当我用!important修改content时postcss-viewport-units会给出警告,如果看着不爽可以在node_modules/postcss-viewport-units/index.js中注释掉warning就行了 技术栈 react, react-router4, redux, redux-thunk, betterScroll, webpack4
vue2.0+ axios+ es6 + vue-router+ stylus +better-scroll高仿饿了么app
04-13
vue2.5.2 + axios 0.18.0+ es6 + vue-router 3.0.1+ stylus +better-scroll1.9 1 高仿饿了么app
vue2.0高仿饿了么better-scroll
alhivlhos222178181的博客
02-05 209
首先安装better-scroll npm i better-scroll -S goods页面模板 <template> <div class="goods"> <div class="menu-wrapper" ref="menuWrapper"> <ul> <...
vue better-scroll 实现饿了么菜单联动滚动
rojie0的博客
12-31 1235
better-scroll 组件使用，左右联动效果
饿了么慕课网学习手记（二）BetterScroll
weixin_40923809的博客
12-15 373
简介 BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件（GitHub地址），有下列功能支持滚动列表，下拉刷新，上拉刷新，轮播图，slider等功能。 为了满足这些功能，better-scroll通过使用惯性滚动、边界回弹、滚动条淡入淡出来确保滚动的流畅。同时还支持很多API和事件，具体支持的事件可以查看官网讲的非常详细。 由于它基于原生JavaScript 实现，不依赖任何...
仿饿了么外卖项目better-scroll插件的实战
weixin_30575309的博客
09-03 221
better-scroll 是一款重点解决移动端各种滚动场景需求的插件，并且可以很好的和 Vue 配合使用 首先来总结一下当下项目需要通过这个插件解决的需求： 1.左边商品种类列表可以滚动，右侧当前种类的商品详情也可以滚动 2.右侧上下滚动的时候左侧对应的种类也会高亮 3.点击左侧的种类的时候右侧会快速滑动至对应的商品 首先安装better-scroll ...
饿了么 vue 源码
04-11
饿了么基于vue的源代码
滚动betterscroll.js下载
08-24
滚动betterscroll.js下载，滚动betterscroll.js下载，滚动betterscroll.js下载，滚动betterscroll.js下载，滚动betterscroll.js下载，滚动betterscroll.js下载，滚动betterscroll.js下载，滚动betterscroll.js下载，滚动betterscroll.js下载，
仿饿了么首页导航栏（ViewPager）
03-27
使用ViewPager实现饿了么首页的导航栏效果，博客地址：http://blog.csdn.net/Lindroid20/article/details/66968410
Vue.js实战 better-scroll 应用
elie_yang的博客
05-23 600
实现的效果如下图所示：项目来源《Vue.js高仿饿了么实战》这里是对better-scroll 组件的简单应用，可以参考文章：https://www.imooc.com/article/18232#本文对这个页面功能的better-scroll应用做点小的改进，记录学习过程，分享大家！教学项目里做的效果是左侧列表滚动，右边菜单导航条的高亮切换显示，但有个问题，如果高亮的菜单藏在视口范围之下，就看不...
js实现饿了么点餐界面左右滑动绑定
qq_44606064的博客
05-24 1081
左右滑动双向绑定
vue开发饿了吗外卖app⑤——使用better-scroll详解和一些知识点
风里有诗句哈的博客
04-09 693
1.可以通过给标签设置ref="menuWrap"属性，然后在this.$refs.menuWrap可以访问这个标签的原生DOM， 同样，给组件绑定ref=”组件名”就可以访问组件的函数，例如this.$refs.shopCart.drop(target) 2.在需要计算DOM相关的东西时，一定要保证DOM已经渲染了，其实DOM真正发生变化时是在this.$nextTick()这个回调函数后，...
vue通过better-scroll仿饿了么、美团实现左右联动
weixin_45518783的博客
11-06 976
1. <template> <div :style="{height: curHeight + 'px'}" class="visitMaintainContainer"> <div v-if="isOpen" :style="{height: curHeight + 'px'}"> <div v-if="right.length...
饿了么项目---8、关于iscoll的扩展 better scroll的使用（1)
qq_36400099的博客
08-10 823
本笔记重点: - 如何在项目中引入Vue的扩展‘better scroll’ - 关于better scroll 的API - 饿了么项目中应用点–让内容在中间区域滚动 - 饿了么项目中应用点–通过一侧点击事件滚动另一侧内容一、better scroll的使用首先贴上改扩展插件的github托管地址： https://github.com/ustbhuangyi/better-scroll
better-scroll实现滚动效果
qq_44957616的博客
09-27 1497
滚动原理 在浏览器中的滚动中，当内容的高度高于外边容器的高度的时候也就出现了滚动条，我们可以通过使用滚动条来看到超出的部分. better-scroll的原理正是基于这里，内容部分的宽度/高度必须大于外部宽度/高度 注意：滚动的元素只能是第一个容器的第一个元素。 废话不多说，上代码 singersMsg:[ { idx:1, con:'你好', }, {
vue引入better-scroll
最新发布
08-25
要在Vue项目中引入better-scroll，你需要按照以下步骤进行操作： 1. 首先，使用npm或yarn安装better-scroll依赖： ``` npm install better-scroll --save ``` 或 ``` yarn add better-scroll ``` 2. 在你的Vue组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值