//老师好，请问一下这个BsScroll为什么是无效的，也不报错，也没有效果，
但是通过调试工具element查看，每个ul标签上已经添加了translate属性，
li标签上也添加了pointer-events属性，滑动时pointer-events为none正常，
但是ul标签上的translate属性值不发生任何改变
//用的版本是
 "dependencies": {
    "@better-scroll/core": "^2.0.0-alpha.20",
    "better-scroll": "^2.0.0-alpha.20",
    "core-js": "^2.6.5",
    "cube-ui": "~1.12.15",
    "vue": "^2.6.10",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-service": "^3.9.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-cli-plugin-cube-ui": "^0.2.5",
    "vue-template-compiler": "^2.6.10"
  },
//dom部分
//这个是购物车左侧组件我绑定的@click事件元素
<div class="shop-left" @click="todoShop">
//这个是购物车列表
      <div class="ShoppingCar" v-bind:class="{ 'ShoppingCar-active':todoShops }">
        <div class="shopping-title">
          <h1 class="shopping-name">购物车</h1>
          <span class="shopping-clear" @click="shopClear">清空</span>
        </div>
        <div ref="listScroll">
          <ul>
            <li v-for="food in selecPrice" class="shopping-list">
              <div class="food-name">{{food.name}}</div>
              <div class="food-btn">
                <div class="food-price"><b>￥</b>{{food.price*food.count}}</div>
                <v-button v-bind:food="food"></v-button>
              </div>
            </li>
          </ul>
        </div>
      </div>
//js部分
 data(){
      return {
        balls:[
          {
            show:false
          },
                   {
            show:false
          },
                   {
            show:false
          },
          {
            show:false
          },
          {
            show:false
          }
        ],
        dropBalls:[],
        todoShops:false//控制父元素展示的变量
      }
    },
methods: {
      //transition的钩子函数，过度开始
          beforeEnter (el) {
            let cont = this.balls.length
            while (cont--) {
              let ball = this.balls[cont]
              if (ball.show) {
                //获取屏幕的距离
                let rect = ball.el.getBoundingClientRect()
                //定位按钮在X轴的坐标
                let x = rect.left - 35
                //定位按钮在Y轴的坐标
                let y = -(window.innerHeight - rect.top - 47)

                el.style.webkitTransform = `translate(0,${y}px)`
                el.style.transform = `translate(0,${y}px)`
                let inner = el.querySelectorAll('.inner-hook')[0]
                inner.style.webkitTransform = `translate(${x}px,0)`
                inner.style.transform = `translate(${x}px,0)`
              }
            }
          },
          enter (el) {
            /* eslint-disable no-unused-vars */
            let rf = el.offsetHeight
            this.$nextTick(() => {
              el.style.webkitTransform = 'translate(0,0)'
              el.style.transform = 'translate(0,0)'
              let inner = el.getElementsByClassName('inner-hook')[0]
              inner.style.webkitTransform = 'translate(0,0)'
              inner.style.transform = 'translate(0,0)'
            })
          },
          afterEnter (el) {
            let ball = this.dropBalls.shift()
            if (ball) {
              ball.show = false
              // ball.style.opacity='0'
            }
          },
          //这个方法是父元素的点击事件方法
          todoShop(){
            let list=this.$refs.listScroll
            let foodCount=0//这个变量是为了判断购物车是否有商品
            this.selecPrice.forEach((food) =>{
              if (food.count > 0) {
                return foodCount=1
              }
            })
            if (foodCount === 1) {
              this.todoShops = !this.todoShops
              console.log(list)//这里可以正常打印出dom元素，正常获取到了dom元素
              if (!this.scroll) {
                    this.scroll = new BScroll(list,{
                      scrollY: true,
                      click:true,
                      probeType:3
                    })
                  }else {
                    this.scroll.refresh()
                  }
              console.log(this.scroll)//这里的打印也正常打印出bsscroll的对象
            }
          },
          //这个是父元素清空的方法
          shopClear(){
                this.selecPrice.forEach((food) =>{
                  food.count=0
                })
                this.todoShops=false
          }
    }
    //样式部分
    .ShoppingCar{
    position: absolute;
    bottom: 64px;
    left: 0;
    z-index: -1;
    max-height: 271px;
    width: 100%;
    background: #fff;
    overflow: hidden;
    transition: all .5s ease-in-out;
    transform: translate(0,50%) scaleY(0);
    opacity: 0;
  }
  .shopping-title{
    height: 40px;
    padding: 0 18px 0 18px;
    background: #f3f5f7;
    border-bottom: 1px solid rgba(7,17,27,.1);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .shopping-name{
    font-size: 14px;
    color: rgb(7, 17, 27);
    font-weight: 200;
  }
  .shopping-clear{
    font-size: 12px;
    color: rgb(0, 160, 220);
  }
  .shopping-list{
    display: flex;
    padding: 12px 18px 12px 18px;
    height: 48px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
  .shopping-list:after{
    content: ' ';
    display: block;
    height: 1px;
    background: rgba(7,17,27,.1);
    position: absolute;
    right: 18px;
    left: 18px;
    bottom: 0;
  }
  .food-name{
    font-size: 14px;
    color: rgb(7, 17, 27);
  }
  .food-btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .food-price{
    font-size: 14px;
    font-weight: 700;
    color: rgb(240,20,20);
    margin-right: 12px;
  }
  .food-price{
    font-size: 10px;
    font-weight: normal;
  }
  //父元素样式
  .logo-font{
  position: absolute;
  font-family: iconfont,serif;
  font-size: 24px;
  line-height: 44px;
  color: rgba(255,255,255,.4);
}
  .shop{
    width: 100%;
    height: 64px;
    background: #141d27;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  .shop-left{
    flex: 1;
    padding-left: 12px;
    display: flex;
    /*align-items: center;*/
  }
  .logo-warp{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 58px;
    margin-top: -12px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #141d27;
    flex: 0 0 58px;
  }
.logo-icon{
  width: 44px;
  height: 44px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #2b343c;
  transition: all .5s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
  .shop-number{
    padding: 22px 12px 12px 18px;
    color: rgba(255,255,255,.4);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    transition: all .5s ease-in-out;
  }
  .shop-line{
    width: 1px;
    height: 40px;
    margin: 12px 12px 12px 0;
    background: rgba(255,255,255,.1);
  }
  .shop-desc{
    font-size: 12px;
    font-weight: 200;
    color: rgba(255,255,255,.4);
    line-height: 24px;
    display: flex;
    align-items: center;
  }
  .shop-right{
    flex: 0 0 105px;
    width: 105px;
    height: 64px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255,255,255,.4);
    line-height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2b333b;
  }
  .logo-minicon{
    transition: all .5s ease-in-out;
    transform: scale(0);
    opacity: 0;
  }
  .ball-container{
    position: fixed;
    left: 35px;
    bottom: 47px;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .ball{
    transition: all .5s cubic-bezier(0.49,-0.29,0.75,0.41);
  }
  .inner{
    width: 16px;
    height: 16px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: rgb(0, 180, 255);
    transition: all .5s ease-in-out;
  }