老师,帮忙看下是啥原因,滚动条还是滚动不了

API下的home.js

/* eslint-disable no-undef */

import axios from 'axios';

import jsonp from 'assets/js/jsonp';

import {SUCC_CODE, TIMEOUT, HOME_RECOMMEND_PAGE_SIZE, jsonpOptions} from './config';

// 获取幻灯片数据--ajax

export const getHomeSlider = () => {

return axios.get('http://www.imooc.com/api/home/slider', {

timeout: TIMEOUT

}).then(res => {

if (res.data.code === SUCC_CODE) {

return res.data.slider;

}

throw new Error('没有成功获取到数据!');

}).catch(err => {

if (err) {

console.log(err);

}

return [

{

linkurl: 'https://www.imooc.com',

picUrl: require('assets/img/404.png')

}

];

}).then(data => {

return new Promise(resolve => {

setTimeout(() => {

resolve(data);

}, 1000);

});

});

};

// 获取热门推荐数据--jsonp

export const getHomeRecommend = (page = 1, psize = HOME_RECOMMEND_PAGE_SIZE) => {

const url = 'https://ju.taobao.com/json/tg/ajaxGetItemsV2.json';

const params = {

page,

psize,

type: 0,

frontCatId: ''

};

return jsonp(url, params, jsonpOptions).then(res => {

if (res.code === '200') {

return res;

}

throw new Error('没有成功获取到数据！');

}).catch(err => {

if (err) {

console.log(err);

}

}).then(res => {

return new Promise(resolve => {

setTimeout(() => {

resolve(res);

}, 1000);

});

});

};

API下的config.js

export const SUCC_CODE = 0;

export const TIMEOUT = 10000;

export const HOME_RECOMMEND_PAGE_SIZE = 20;

export const jsonpOptions = {

param: 'callback',

timeout: TIMEOUT

};

SCSS下的_index.scss

@charset "UTF-8";

@import "reset";

@import "base";

@import "icons";

@import "containers";

@import "tabbar";

SCSS下的_variables.scss

//color

$icon-color-default: #fff;

$icon-color: #ccc;

$link-active-color: #de181b;

$border-color: #e5e5e5;

//bgc

$bgc-theme: #f5f5f5;

$header-bgc: rgb(222, 24, 27);

$header-bgc-translucent: rgba(222, 24, 27, 0.9);

$modal-bgc: rgba(0, 0, 0, 0.4);

//font size

$font-size-base: 12px;

$font-size-l: $font-size-base + 2;

$icon-font-size-sm: 18px;

$icon-font-size: 24px;

//z-index

$navbar-z-index: 1000;

$tabbar-z-index: 1000;

$backtop-z-index: 1100;

$search-z-index: 1200;

$product-z-index: 1200;

$search-popup-z-index: $search-z-index + 10;

$category-popup-z-index: $search-z-index - 10;

//size

$navbar-height: 50px;

$tabbar-height: 50px;

SCSS下的_tabbar.scss

@import "mixins";

.g-tabbar {

display: flex;

width: 100%;

height: $tabbar-height;

background-color: #fff;

&-item {

flex: 1;

@include flex-center(column);

.iconfont {

margin-bottom: 4px;

font-size: $icon-font-size;

}

}

}

SCSS下_reset.scss

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, hr, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend, input, button, select, textarea,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

box-sizing: border-box;

padding: 0;

margin: 0;

font: inherit;

font-size: 100%;

vertical-align: baseline;

border: none;

outline: none;

-webkit-tap-highlight-color: transparent; // 去掉点击对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)

-webkit-user-select: none; // 禁止选择文字

}

html {

-ms-text-size-adjust: 100%;

-webkit-text-size-adjust: 100%; // 禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化)

//-webkit-overflow-scrolling: touch;

-webkit-font-smoothing: antialiased; // 字体抗锯齿

-moz-osx-font-smoothing: grayscale;

}

input, select, textarea {

border: none;

-webkit-appearance: none; // 清除内阴影

-webkit-user-select: auto !important; // 否则ios下输入框无法输入

}

textarea {

overflow: auto;

resize: none;

}

h1, h2, h3, h4, h5, h6 {

font-size: 100%;

font-weight: normal;

}

address, caption, cite, code, dfn, th, var, i, em {

font-style: normal;

}

abbr, acronym { // 去掉firefox下此元素的边框

border: none;

font-variant: normal;

}

ul, ol {

list-style: none;

}

del {

text-decoration: line-through;

}

ins, a {

text-decoration: none;

}

a, img {

-webkit-touch-callout: none; // 禁用长按页面时的弹出菜单(iOS下有效)

}

img {

border: none;

/*display: block;*/

vertical-align: top;

}

table { // 去掉各table cell的边距并让其边重合

border-spacing: 0;

border-collapse: collapse;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

}

//统一上标和下标

sub, sup {

position: relative;

font-size: 75%;

line-height: 0;

vertical-align: baseline;

}

sup {

top: -0.5em;

}

sub {

bottom: -0.25em;

}

SCSS下的_mixins.scss   

@import "variables";

// flex-center

@mixin flex-center($direction: row) {

display: flex;

justify-content: center;

align-items: center;

flex-direction: $direction;

}

//flex-between

@mixin flex-between() {

display: flex;

justify-content: space-between;

align-items: center;

}

//ellipsis

@mixin ellipsis() {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

//multi line ellipsis

@mixin multiline-ellipsis($num: 2) {

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: $num;

-webkit-box-orient: vertical;

white-space: normal !important;

word-wrap: break-word;

}

SCSS下_containers.scss

@import "mixins";

.g-container {

overflow: hidden;

position: relative;

width: 100%;

max-width: 640px;

min-width: 320px;

height: 100%;

margin: 0 auto;

}

.g-view-container {

height: 100%;

padding-bottom: $tabbar-height;

}

.g-header-container{

position: absolute;

left: 0;

top: 0;

z-index: $navbar-z-index;

width: 100%;

}

.g-footer-container {

position: absolute;

left: 0;

bottom: 0;

z-index: $tabbar-z-index;

width: 100%;

box-shadow: 0 0 10px 0 hsla(0, 6%, 58%, 0.6);

}

.g-backtop-container{

position: absolute;

z-index: $backtop-z-index;

right: 10px;

bottom: $tabbar-height + 10px;

}

SCSS下_base.scss

@import "mixins";

body, button, input, select, textarea {

color: #5d656b;

font-size: $font-size-base;

font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;

line-height: 1;

}

body {

background-color: #eee;

}

a {

color: #686868;

text-decoration: none;

&:active {

color: $link-active-color;

}

}

html, body {

overflow: hidden;

width: 100%;

height: 100%;

}

assets                   js下的jsonp.js

import jsonp from 'jsonp';

const parseParam = param => {

let params = [];

for (const key in param) {

params.push([key, param[key]]);

}

return params.map(value => value.join('=')).join('&');

};

export default (url, data, options) => {

url += (url.indexOf('?') < 0 ? '?' : '&') + parseParam(data);

return new Promise((resolve, reject) => {

jsonp(url, options, (err, data) => {

if (err) {

reject(err);

} else {

resolve(data);

}

});

});

};

bae                     slider下的index.vue

<template>

<swiper :options="swiperOption">

<slot></slot>

<div class="swiper-pagination" v-if="pagination"  slot="pagination"></div>

</swiper>

</template>

<script>

import {swiper} from 'vue-awesome-swiper';

export default {

name: "MeSlider",

components: {

swiper

},

props: {

direction: {

type: String,

default: 'horizontal',

validator(value) {

return[

'horizontal',

'vertical'

].indexOf(value) > -1;

}

},

interval: {

type: Number,

default: 3000,

validator(value) {

return value >=0;

}

},

loop: {

type: Boolean,

default: true

},

pagination:{

type: Boolean,

default: true

}

},

data() {

return {

swiperOption: {

watchOverflow: true,

direction: this.direction,

autoplay: this.interval ? {

delay: this.interval,

disableOnInteraction:false

} :false,

slidesPerView:1,

loop: this.loop,

pagination: {

el : this.pagination ? '.swiper-pagination' : null

}

}

}

}

}

</script>

<style lang="scss" scoped>

.swiper-container{

width: 100%;

height: 100%;

}

</style>

base                scroll下的index.vue

<!--  -->

<template>

<swiper :options="swiperOption" ref="swiper">

<swiper-slide>

<slot></slot>

</swiper-slide>

<div class="swiper-scollbar" v-if="scrollbar" slot="scrollbar"></div>

</swiper>

</template>

<script>

import {swiper,swiperSlide} from 'vue-awesome-swiper';

export default {

name: 'MeScroll',

components:{

swiper,

swiperSlide

},

props: {

scrollbar: {

type:Boolean,

default:true

},

data: {

type:[Array, Object]

}

},

data(){

return {

swiperOption: {

direction: 'vertical',

sliderPerView: 'auto',

freeMore: true,

setWrapperSize: true,

scrollbar: {

el: this.scrollbar ? '.swiper-scrollbar' : null,

hide: true

}

}

};

},

watch:{

data(){

this.update();

}

},

methods: {

update() {

this.$refs.swiper && this.$refs.swiper.swiper.update();

}

}

};

</script>

<style lang='scss' scoped>

@import "~assets/scss/mixins";

.swiper-container{

overflow: hidden;

width: 100%;

height: 100%;

}

.swiper-slide{

height: auto;

}

</style>

base                      navbar下的index.vue

<template>

<div class="mine-navbar">

<div class="mine-navbar-left" v-if="$slots.left">

<slot name="left"></slot>

</div>

<div class="mine-navbar-center" v-if="$slots.center">

<slot name="center"></slot>

</div>

<div class="mine-navbar-right" v-if="$slots.right">

<slot name="right"></slot>

</div>

<h1 class="mine-navbar-title" v-if="title" v-text="title">

<span class="mine-navbar-text" v-text="title"></span>

</h1>

</div>

</template>

<script>

export default {

name:'MeNavbar',

props: {

title: {

type: String,

default: ''

}

}

}

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

.mine-navbar{

position: relative;

@include flex-between();

height: 50px;

background-color: #fff;

&-left{

margin-left: 10px;

~.mine-navbar-right{

position: static;

}

}

&-center{

flex: 1;

margin: 0 10px;

~ .mine-navbar-right{

position: static;

}

}

&-right{

position: absolute;

right: 0;

@include flex-center();

height: 100%;

margin-right:10px;

}

&-title{

position: absolute;

top: 0;

bottom: 0;

left: 20%;

right: 20%;

@include flex-center();

text-align: center;

}

&-text{

width: 100%;

font-size: 18px;

line-height: 1.5;

@include ellipsis();

}

}

</style>

base                      loading下的index.vue

<!--  -->

<template>

<div class="mine-loading" :class="{'mine-loading-inline': inline}">

<span class="mine-loading-indicator" v-if="indicator==='on'">

<slot><img src="./loading.gif" alt="loading"></slot>

</span>

<span class="mine-loading-text" v-if="text">{{text}}</span>

</div>

</template>

<script>

export default {

name: 'MeLoading',

props: {

indicator: {

type: String,

default: 'on',

validator(value){

return ['on','off'].indexOf(value) > -1;

}

},

text: {

type: String,

default: '加载中...',

},

inline: {

type: Boolean,

default: false

}

}

}

</script>

<style lang="scss" scoped >

@import "~assets/scss/mixins";

.mine-loading {

overflow: hidden;

width: 100%;

height: 100%;

@include flex-center(column);

&.mine-loading-inline{

flex-direction: row;

.mine-loading-indicator ~ .mine-loading-text {

margin-top: 0px;

margin-left: 6px;

}

}

}

.mine-loading-indicator ~ .mine-loading-text {

margin-top: 6px;

}

</style>

components        tabbar下的index.vue

<template>

<div class="g-tabbar">

<router-link class="g-tabbar-item" to="/home">

<i class="iconfont icon-home"></i>

<span>首页</span>

</router-link>

<router-link class="g-tabbar-item" to="/category">

<i class="iconfont icon-category"></i>

<span>分类</span>

</router-link>

<router-link class="g-tabbar-item" to="/cart">

<i class="iconfont icon-cart"></i>

<span>购物车</span>

</router-link>

<router-link class="g-tabbar-item" to="/personal">

<i class="iconfont icon-personal"></i>

<span>个人中心</span>

</router-link>

</div>

</template>

<script>

export default {

name: 'CTabbar'

};

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

.router-link-active{

color: $link-active-color;

}

</style>

main.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import 'babel-polyfill';

import Vue from 'vue';

import App from './App';

import router from './router';

// import fastclick from 'fastclick';

import 'assets/scss/index.scss';

import 'swiper/dist/css/swiper.css';

import VueLazyload from 'vue-lazyload';

// fastclick.attach(document.body);

Vue.use(VueLazyload, {

preLoad: 1,

error: require('assets/img/error.png'),

loading: require('assets/img/loading.gif'),

attemp: 1

});

Vue.config.productionTip = false;

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

render: h => h(App)

});

APP.vue

<template>

<div id="app" class="g-container">

<div class="g-view-container">

<router-view></router-view>

</div>

<div class="g-footer-container">

<c-tabbar/>

</div>

</div>

</template>

<script>

import CTabbar from 'components/tabbar';

export default {

name: 'App',

components: {

CTabbar

}

};

</script>

router下的index.vue

import Vue from 'vue';

import Router from 'vue-router';

// import Home from 'pages/home';

// import Category from 'pages/category';

// import Cart from 'pages/cart';

// import Personal from 'pages/personal';

// import Search from 'pages/search';

// import Product from 'pages/product';

Vue.use(Router);

const routes = [

{

name: 'home',

path: '/home',

component: () => import('pages/home'),

children: [

{

name: 'home-product',

path: 'product/:id',

component: () => import('pages/product')

}

]

},

{

name: 'category',

path: '/category',

component: () => import('pages/category')

},

{

name: 'cart',

path: '/cart',

component: () => import('pages/cart')

},

{

name: 'personal',

path: '/personal',

component: () => import('pages/personal')

},

{

name: 'search',

path: '/search',

component: () => import('pages/search')

},

{

path: '*',

redirect: '/home'

}

];

export default new Router({

routes

});