老是帮忙看下,为什么我这里购物车的滚动条里的内容可以往下拉出这么多?
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。
我做出来后效果图如下图所示,
滚动条里的内容拉走后,下面还留着好多空白,也能拉上去,而且控制台报出了这个错误。
[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
27
收起
正在回答 回答被采纳积分+1
3回答
4.Vue与React高级框架开发
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星