老师,帮忙看下是啥原因,滚动条还是滚动不了
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>home下的index.vue
<template>
<div class="home">
<header class="g-header-container">
<home-header/>
</header>
<me-scroll :data="recommends">
<home-slider/>
<home-nav/>
<home-recommend @loaded="getRecommends" />
</me-scroll>
<div class="g-backtop-container"></div>
<router-view></router-view>
</div>
</template>
<script>
import MeScroll from 'base/scroll';
import HomeHeader from './header';
import HomeSlider from './slider';
import HomeNav from './nav';
import HomeRecommend from './recommend';
export default {
name: 'Home',
components: {
MeScroll,
HomeHeader,
HomeSlider,
HomeNav,
HomeRecommend
},
data(){
return {
recommends: []
};
},
methods: {
updateScroll(){
},
getRecommends(recommends) {
this.recommends = recommends;
}
}
};
</script>
<style lang="scss" scoped>
@import "~assets/scss/mixins";
.home {
overflow: hidden;
width: 100%;
height: 100%;
background-color: $bgc-theme;
}
</style>
home下的recommend.vue
<template>
<div class="home">
<header class="g-header-container">
<home-header/>
</header>
<me-scroll :data="recommends">
<home-slider/>
<home-nav/>
<home-recommend @loaded="getRecommends" />
</me-scroll>
<div class="g-backtop-container"></div>
<router-view></router-view>
</div>
</template>
<script>
import MeScroll from 'base/scroll';
import HomeHeader from './header';
import HomeSlider from './slider';
import HomeNav from './nav';
import HomeRecommend from './recommend';
export default {
name: 'Home',
components: {
MeScroll,
HomeHeader,
HomeSlider,
HomeNav,
HomeRecommend
},
data(){
return {
recommends: []
};
},
methods: {
updateScroll(){
},
getRecommends(recommends) {
this.recommends = recommends;
}
}
};
</script>
<style lang="scss" scoped>
@import "~assets/scss/mixins";
.home {
overflow: hidden;
width: 100%;
height: 100%;
background-color: $bgc-theme;
}
</style>
目前的情况是向上拖动可以拖,但是松开鼠标立马返回,没法进行滚动呀
正在回答
product下的index.vue
<template>
<div class="product">
product
</div>
</template>
<script>
export default {
name: 'Product'
};
</script>
<style lang="scss" scoped>
@import "~assets/scss/mixins";
.product {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: $product-z-index;
width: 100%;
height: 100%;
background-color: $bgc-theme;
}
</style>
HOME下的config.js
export const sliderOptions = {
direction: 'horizontal',
loop: true,
interval: 0,
pagination: true
};
export const navItems = [
// 原nav.uve的数据
{
linkUrl: 'https://www.imooc.com',
picUrl: require('./img/nav-item-1.png'),
text: '拍卖'
},
{
linkUrl: 'https://www.imooc.com',
picUrl: require('./img/nav-item-2.png'),
text: '拍卖'
},
{
linkUrl: 'https://www.imooc.com',
picUrl: require('./img/nav-item-3.png'),
text: '拍卖'
},
{
linkUrl: 'https://www.imooc.com',
picUrl: require('./img/nav-item-4.png'),
text: '拍卖'
},
{
linkUrl: 'https://www.imooc.com',
picUrl: require('./img/nav-item-5.png'),
text: '拍卖'
},
{
linkUrl: 'https://www.imooc.com',
picUrl: require('./img/nav-item-6.png'),
text: '拍卖'
},
{
linkUrl: 'https://www.imooc.com',
picUrl: require('./img/nav-item-7.png'),
text: '拍卖'
},
{
linkUrl: 'https://www.imooc.com',
picUrl: require('./img/nav-item-8.png'),
text: '拍卖'
},
{
linkUrl: 'https://www.imooc.com',
picUrl: require('./img/nav-item-9.png'),
text: '拍卖'
},
{
linkUrl: 'https://www.imooc.com',
picUrl: require('./img/nav-item-10.png'),
text: '拍卖'
}
];
HOME下的header.vue
<template>
<me-navbar class="header" >
<i class="iconfont icon-scan" slot='left'></i>
<div slot="center">搜索框</div>
<i class="iconfont icon-scan" slot='right'></i>
</me-navbar>
</template>
<script>
import MeNavbar from 'base/navbar';
export default {
name: 'HomeHerder',
components: {
MeNavbar
}
};
</script>
<style lang='scss' scoped>
@import "~assets/scss/mixins";
.header{
&.mine-navbar{
background-color: transparent;
// background-color: $header-bgc-translucent;
}
.iconfont {
color: $icon-color-default;
font-size: $icon-font-size;
}
}
</style>
HOME下的nav.vue
<template>
<nav class="nav">
<ul class="nav-list">
<li
class="nav-item"
v-for="(item, index) in navs"
:key="index">
<a :href="item.linkUrl" class="nav-link">
<img :src="item.picUrl" class="nav-pic">
<span>{{item.text}}</span>
</a>
</li>
</ul>
</nav>
</template>
<script>
import {navItems} from './config';
export default {
name: 'HomeNav',
// data() {
// return {
// navs: navItems
// 放到config.js中
// {
// linkUrl: 'https://www.imooc.com',
// picUrl: require('./img/nav-item-1.png'),
// text: '拍卖'
// },
// {
// linkUrl: 'https://www.imooc.com',
// picUrl: require('./img/nav-item-2.png'),
// text: '拍卖'
// },
// {
// linkUrl: 'https://www.imooc.com',
// picUrl: require('./img/nav-item-3.png'),
// text: '拍卖'
// },
// {
// linkUrl: 'https://www.imooc.com',
// picUrl: require('./img/nav-item-4.png'),
// text: '拍卖'
// },
// {
// linkUrl: 'https://www.imooc.com',
// picUrl: require('./img/nav-item-5.png'),
// text: '拍卖'
// },
// {
// linkUrl: 'https://www.imooc.com',
// picUrl: require('./img/nav-item-6.png'),
// text: '拍卖'
// },
// {
// linkUrl: 'https://www.imooc.com',
// picUrl: require('./img/nav-item-7.png'),
// text: '拍卖'
// },
// {
// linkUrl: 'https://www.imooc.com',
// picUrl: require('./img/nav-item-8.png'),
// text: '拍卖'
// },
// {
// linkUrl: 'https://www.imooc.com',
// picUrl: require('./img/nav-item-9.png'),
// text: '拍卖'
// },
// {
// linkUrl: 'https://www.imooc.com',
// picUrl: require('./img/nav-item-10.png'),
// text: '拍卖'
// }
// };
// },
created() {
this.navs = navItems;
// console.log(this);
}
};
</script>
<style lang="scss" scoped>
@import "~assets/scss/mixins";
.nav {
width: 100%;
padding-top: 15px;
background-color: #fff;
&-list {
display: flex;
flex-wrap: wrap;
}
&-item {
width: 20%;
margin-bottom: 15px;
}
&-link {
@include flex-center(column);
}
&-pic {
width: 60%;
margin-bottom: 8px;
}
}
</style>
<template>
<div class="slider-wrapper">
<me-loading v-if="!sliders.length"></me-loading>
<me-slider
:direction="direction"
:loop="loop"
:interval="interval"
:pagination="pagination"
v-else
>
<swiper-slide v-for="(item, index) in sliders" :key="index">
<a href="item.linkurl" class="slider-link">
<img :src="item.picUrl" alt="" class="slider-img">
</a>
</swiper-slide>
</me-slider>
</div>
</template>
<script>
import MeSlider from 'base/slider';
import {swiperSlide} from 'vue-awesome-swiper';
import {sliderOptions} from './config';
import {getHomeSlider} from 'api/home';
import MeLoading from 'base/loading';
export default {
name: 'HomeSlider',
components: {
MeSlider,
MeLoading,
swiperSlide
},
data() {
return {
direction: sliderOptions.direction,
loop: sliderOptions.loop,
interval: sliderOptions.interval,
pagination: sliderOptions.pagination,
sliders: []
};
},
created() {
this.getSliders();
},
methods: {
getSliders() {
getHomeSlider().then(data => {
this.sliders=data;
});
}
}
};
</script>
<style lang="scss" scoped>
.slider-wrapper {
height: 183px;
}
.slider-link{
display: block;
}
.slider-link,
.slider-img{
width: 100%;
height: 100%;
}
</style>
HOME下的slider.vue
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue，结合多个实战案例，还原真实开发场景，最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星