滚动插件【better-scroll】

前言

项目重温到菜单部分，之前使用cube-ui里面的组件去写，靠现成的组件去实现一些功能，想想还是不适用于我这个菜鸟哈哈，现在按照一期的方式去写菜单页面，也就是一步一个代码去实现那些功能。这一篇主要讲better-scroll（界面滚动）

思路：布局（左菜单栏、右商品栏）–> 引入渲染数据（ui） --> 界面滚动

布局

布局都是html和css部分，没啥特别的

<template>
<div class="goods">
  <div class="menu-wrapper" id="menu-wrapper">
    <ul>
      <li v-for="(item, index) in goods" :key="index" class="menu-item">
        <span class="text" border-1px>
          <span v-show="item.type>0" class="icon">
            <support-ico :size="3" :type="item.type"></support-ico>
          </span>
          {{item.name}}
        </span>
      </li>
    </ul>
  </div>
  <div class="foods-wrapper" id="foods-wrapper">
    <ul>
      <li v-for="(item, index) in goods" :key="index" class="food-list">
        <h1 class="title">{{item.name}}</h1>
        <ul>
          <li v-for="(food, food_index) in item.foods" :key="food_index" class="food-item" border-1px>
            <div class="icon">
              <img :src="food.icon" width="57" height="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>好评率{{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>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</template>

<style lang="stylus" ref="stylesheet/stylus">
  @import '~common/stylus/mixin'

  .goods
    display flex
    position absolute
    width 100%
    top 0
    bottom 46px
    overflow hidden
    .menu-wrapper
      flex 0 0 80px
      width 80px
      background #f3f5f7
      .menu-item
        display table   /*垂直居中*/
        height 54px
        width 56px
        padding 0 12px
        line-height 14px
        .text
          display table-cell
          width 56px
          vertical-align middle
          border-1px(rgba(7, 17, 27, 0.1))
          font-size 12px
          white-space normal
    .foods-wrapper
      flex 1
      .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: 15px;
        border-1px(rgba(7, 17, 27, 0.1))
        &:last-child
          border-none()
          margin-bottom: 0;
        .icon
          flex 0 0 57px
          margin-right: 10px;
        .content
          flex: 1;
          .name
            margin 2px 0 8px 0
            height 14px
            line-height 14px
            font-size 14px
            color rgb(7, 17, 27)
          .desc, .extra
            line-height: 10px;
            font-size 10px
            color rgb(147, 153, 159)
          .desc
            line-height 12px
            margin-bottom 8px
          .extra
            .count
              margin-right 12px
          .price
            font-weight 700
            line-height: 24px;
            .now
              margin-right: 8px;
              font-size 14px
              color rgb(240, 20, 20)
            .old
              text-decoration line-through
              font-size 10px
              color rgb(147,153,159)
</style>

数据

获取数据还是用的之前的方法，上一篇讲过了：https://blog.csdn.net/aoteman_web/article/details/110305557

滚动

better-scroll官方文档：https://better-scroll.github.io/docs-v1/doc/zh-hans/*
1、首先安装better-scroll插件

可直接在项目中的package.json文件中选择版本安装

也可以直接输入命令安装

npm install better-scroll --save

2、在所需组件中引用

import BScroll from 'better-scroll'

3、应用

methods: {
      _initScroll() {
      // 先获取到需要滚动的元素
        const menuWrapper = document.getElementById('menu-wrapper')
        const foodsWrapper = document.getElementById('foods-wrapper')
        const menuScroll = new BScroll(menuWrapper)
        const foodsScroll = new BScroll(foodsWrapper)
        console.log(menuScroll, foodsScroll)
      }
    }

4、调用（在获取数据时调用这个方法）

fetch() {
        getGoods().then((goods) => {
          this.goods = goods
          // 调用
          this._initScroll()
        })
      }

注意

这个goods设置了absolute属性，就要在它的上一级设置relative属性，goods的上一级是cube-slide-item。