详情页面无法滚动

Question

老师我在show方法中调用了$nextTick，但是详情页面还是滚动不了。

Answer 1

ustbhuangyi 2019-04-25 09:48:58

你的页面满足滚动条件吧，内容高度是否超过了容器高度？

• 提问者 慕设计3398593 #1

  我尝试了，让内容超过了容器高度，依旧无法滚动。

• 提问者 慕设计3398593 #2

  代码我放到了下面几楼，麻烦您帮我看下，是什么原因呢

• ustbhuangyi 回复 提问者 慕设计3398593 #3

  你加个 debugger 断点看看，初始化 scroll 的时候页面是否渲染了，以及当时渲染的高度是否正确

Answer 2

提问者 慕设计3398593 2019-04-25 11:00:44

<style lang="stylus" scoped>

@import "~common/stylus/variable"

@import "~common/stylus/mixin"

@import "~common/stylus/icon"

.food

position: fixed

left: 0

top: 0

z-index: 30

width: 100%

background: $color-white

&.fade-enter, &.fade-leave-active

opacity: 0

&.fade-enter-active, &.fade-leave-active

transition: all .3s ease-in-out

.move-enter, .move-leave-active

transform: translate3d(100%, 0, 0)

.move-enter-active, .move-leave-active

transition: all .3s ease-in-out

Answer 3

提问者 慕设计3398593 2019-04-25 11:00:31

<script>

import Split from 'components/split/split'

import CartControl from 'components/cart-control/cart-control'

export default {

name: 'food',

components: {

Split,

CartControl

},

props: {

food: {

type: Object

}

},

data () {

return {

visible: false

}

},

methods: {

show () {

this.visible = true

this.$nextTick(() => {

this.$refs.scrollContent.refresh()

})

},

hide () {

this.visible = false

},

addFirst (evnet) {

this.$set(this.food, 'count', 1)

this.$refs.shopCartSticky.drop(evnet.target)

},

addFood (el) {

this.$refs.shopCartSticky.drop(el)

}

}

}

</script>

Answer 4

提问者 慕设计3398593 2019-04-25 10:59:30

<template>

<transition name="fade">

<div class="food" v-show="visible">

<transition name="move">

<div v-show="visible">

<cube-scroll ref="scrollContent" class="scroll-content">

<div class="food-content">

<div class="image-header">

<img :src="food.image">

<div class="back" @click="hide">

<i class="icon-arrow_lift"></i>

</div>

</div>

<div class="content">

<h1 class="title">{{food.name}}</h1>

<div class="detail">

<span class="sell-count">月售{{food.sellCount}}份</span>

<span class="rating">好评率{{food.rating}}%</span>

</div>

<div class="price">

<span class="now">￥{{food.price}}</span><span

class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>

</div>

<div class="cart-control-wrapper">

<cart-control :food="food" @add="addFood"></cart-control>

</div>

<transition name="buy-fade">

<div class="buy" v-show="!food.count" @click="addFirst">加入购物车</div>

</transition>

</div>

<split v-show="food.info"></split>

<div class="info" v-show="food.info">

<h1 class="title">商品信息</h1>

<p class="text">{{food.info}}</p>

<p class="text">{{food.info}}</p>

<p class="text">{{food.info}}</p>

<p class="text">{{food.info}}</p>

<p class="text">{{food.info}}</p>

</div>

<split></split>

</div>

</cube-scroll>

</div>

</transition>

</div>

</transition>

</template>