老师，cube-scroll不能拖动

Question

老师，我查了浏览器，dom元素嵌套没有问题，cube-scroll-wrapper高度271px，cube-scroll-content高度441px，可就是无法拖动。对比课程源代码没有找到问题，还请老师帮忙。下边是浏览器元素审查截图和shop-cart-list组件的代码。
cube-scroll-wrapper:
cube-scroll-content:
下边是shop-cart-list组件代码：

<template>
  <transition name="fade">
    <cube-popup
      v-show="visible"
      position="bottom"
      :mask-closable=true
      @mask-click="maskClick"
      type="shop-cart-list"
      :z-index=90
    >
      <transition name="move">
        <div v-show="visible">
          <div class="list-header">
            <h1 class="title">购物车</h1>
            <span class="empty">清空</span>
          </div>
          <cube-scroll class="list-content" ref="listContent">
            <ul>
              <li
                class="food"
                v-for="(food,index) in selectedFoods"
                :key="index"
              >
                <span class="name">{{food.name}}</span>
                <div class="price">
                  <span>￥{{food.price*food.count}}</span>
                </div>
                <div class="cart-control-wrapper">
                  <cart-control :food="food"></cart-control>
                </div>
              </li>
            </ul>
          </cube-scroll>
        </div>
      </transition>
    </cube-popup>
  </transition>
</template>

<script>
import CartControl from 'components/goods/cart-control';
const EVENT_HIDE = 'hide';
export default {
  name: 'ShopCartList',
  components: {
    CartControl
  },
  props: {
    selectedFoods: Array
  },
  data() {
    return {
      visible: false
    };
  },
  methods: {
    show() {
      this.visible = true;
    },
    hide() {
      this.visible = false;
    },
    maskClick() {
      this.hide();
      this.$emit(EVENT_HIDE);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~assets/sass/variable.scss";
.cube-shop-cart-list{
  bottom:1.28rem /* 48/37.5 */;
  &.fade-enter, &.fade-leave-active{
    opacity: 0;
  }
  &.fade-enter-active, &.fade-leave-active{
    transition: all 0.3s ease-in-out;
  }
  .move-enter, .move-leave-active{
    transform:translate3d(0, 100%, 0);
  }
  .move-enter-active, .move-leave-active{
    transition: all 0.3s ease-in-out;
  }
  .list-header{
    height:1.066667rem /* 40/37.5 */;
    line-height: 1.066667rem /* 40/37.5 */;
    padding: 0 .48rem /* 18/37.5 */;
    background-color: $color-background-ssss;
    .title{
      float: left;
      font-size: $fontsize-medium;
      color:$color-dark-grey;
    }
    .empty{
      float: right;
      font-size: $fontsize-small;
      color:$color-blue;
    }
  }
  .list-content{
    padding: 0 .48rem /* 18/37.5 */;
    max-height: 5.786667rem /* 217/37.5 */;
    overflow: hidden;
    background-color: $color-white;
    .food{
      position: relative;
      padding: .32rem /* 12/37.5 */ 0;
      .name{
        line-height: .64rem /* 24/37.5 */;
        font-size: $fontsize-medium;
        color:$color-dark-grey;
      }
      .price{
        position: absolute;
        right: 2.4rem /* 90/37.5 */;
        bottom: .32rem /* 12/37.5 */;
        line-height: .64rem /* 24/37.5 */;
        font-weight: 700;
        color:$color-red;
        font-size: $fontsize-medium;
      }
      .cart-control-wrapper{
        position: absolute;
        right: 0;
        bottom: .16rem /* 6/37.5 */;
      }
    }
  }
}
</style>

最后，还有个问题，老师，cart-control组件的加减两个图片一高一低是什么原因？在goods组件中正常，在shop-cart-list组件中就有问题。

Answer 1

ustbhuangyi 2020-06-29 10:39:15

这里改成 v-if 就可以了，另外我没有看到一高一低的情况啊

• 提问者 Walker游游 #1

  谢谢老师！老师，这里用show不可以，用if就可以，这是为什么？是因为if重新加载dom元素么？一高一低情况，浏览器的模拟器里不明显，在手机端就很明显。

• ustbhuangyi 回复 提问者 Walker游游 #2

  因为用 v-if 的话只有为 true 的时候才会创建 DOM，这样 cube-scroll 组件才会走 mount 钩子函数初始化 scroll，初始化的时机才对。

• 提问者 Walker游游 回复 ustbhuangyi #3

  好的，谢谢老师！

点开查看后面3条评论

Answer 2

ustbhuangyi 2020-06-29 00:51:14

你把代码传到 GitHub 上，我抽空看一下

• 提问者 Walker游游 #1

  辛苦老师看一下，卡在这里好难受，，，https://github.com/walkerUU/VueMall

Answer 3

提问者 Walker游游 2020-06-28 17:00:38

补充一点，老师，我把<cube-scroll>部分代码替换成您的，可以拖动。但是，替换后，代码不做任何修改，只是刷新一下浏览器，shop-cart-list就又无法拖动了。