4回答

ustbhuangyi

2019-04-25

已采纳

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

0

3

ustbhuangyi

回复

慕设计3398593

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

2019-04-25

共3条回复

慕设计3398593

提问者

2019-04-25

<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

0

0

慕设计3398593

提问者

2019-04-25

<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>

0

0

慕设计3398593

提问者

2019-04-25

<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>

0

0