老是帮忙看下,为什么我这里购物车的滚动条里的内容可以往下拉出这么多?

老是帮忙看下,为什么我这里购物车的滚动条里的内容可以往下拉出这么多?

cart文件夹里有3个文件,分别是:

cart/index.vue

<template>
  <div class="cart">
    <!-- 购物车标题 -->
    <header class="g-header-container">
      <cart-header />
    </header>

    <!-- 购物车商品列表 -->
    <me-scroll
      scrollbar
      ref="scroll"
      class="g-content-container"
    >
      <img
        src="./cart.png"
        alt="购物车列表"
        class="cart-list"
      />
      <!-- 滚动条拉到最底时,图片还会继续上拉,同时控制台提示错误:[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
      不知道是什么原因,也找不到解决办法 -->
    </me-scroll>

  </div>
</template>

<script>
import CartHeader from './header'
import MeScroll from 'base/scroll'

export default {
  name: 'cart',
  components: {
    CartHeader,
    MeScroll
  },
  mounted () {
    this.$refs.scroll.updateScrollBar()
  }
}
</script>

<style scoped>
  @import "~assets/scss/mixins";
  .g-content-container {
    position: static;
    padding-top: $navbar-height;
    .cart-list {
      width: 100%;
    }
  }
</style>

    cart/header.vue

<template>
  <me-navbar class="header" title="购物车">
    <!-- 右侧消息图标 -->
    <i slot="right" class="iconfont icon-msg"></i>
  </me-navbar>
</template>

<script>
import MeNavbar from 'base/navbar'
export default {
  name: 'CartHeader',
  components: {
    MeNavbar
  }
}
</script>

<style scoped>
  @import "~assets/scss/mixins";
  .header {

    &.mine-navbar {
      background-color: $header-bgc-translucent;
      // background-color: transparent;
      transition: background-color 0.5s;

      // & /deep/ .mine-navbar-text {
      //   color:#333;
      // }
    }

    .iconfont {
      color: $icon-color-default;
      font-size: $icon-font-size;
    }
  }

</style>

cart/cart.png,就是作业素材里的cart.png。

我做出来后效果图如下图所示,            http://img1.sycdn.imooc.com//climg/5e6f76fe09c8d3b910150939.jpg

滚动条里的内容拉走后,下面还留着好多空白,也能拉上去,而且控制台报出了这个错误。

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
提问者 Raznov 2020-03-17 16:34:30

已经找到滚动条拉到底,图片还能往上拉的原因,是因为根标签的高度被子元素撑开了,

给根标签加上 height=100% ,这样它的高度就算由父组件的 <div class="g-view-container">标签决定,再也不会可以继续往上拉,控制台也不会报错了。

http://img1.sycdn.imooc.com//climg/5e708a7e09b2be9a04510365.jpg


慕课网的粉 2020-03-17 10:58:30

拉到最底,还可以往上拉,是正常的,你这个报错应该是fastclick的问题,你可以在app.vue里添加下方样式

*{
    touch-action:none
  }


  • 提问者 Raznov #1
    我已经找到滚动拉到最底,图片还可以往上拉的原因,给cart/index.vue中的根标签添加 height=100%就可以解决,报错也顺带不弹出来了
    2020-03-17 16:26:29
提问者 Raznov 2020-03-16 21:13:16

对了,在index.vue文件中的

mounted () {
    this.$refs.scroll.updateScrollBar()
  }

要改成

mounted () {
    this.$refs.scroll.update()
 }

因为我的scroll组件略微修改了一点。

我把我写的这个购物车组件放进从慕课网下载的源文件中运行,也是有同样的问题。

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师