收藏
回答

请教scroll-view高度的问题

问题模块
API和组件

目前正在设计如下图所示的菜单栏。期望做到两点:

    1,当菜单栏中的菜单名称(如下图的菜单1,菜单2等等)较多时,能够横向滚动,全部显示。包括最后一个菜单名称对应的菜单内容。

    2,当单击菜单名称时,其对应的菜单能自动弹出(如单击菜单1时,显示其下的Hello,子菜单)。为了实现这一点,菜单内容是放在 一个绝对定位的浮动view层中。

为了能够横向滚动,使用了scroll-view。但把菜单名称放进scroll-view层之后,就无法自动弹出其菜单内容。因为就我目前所知,scroll-view的高度不能自动变化。如果不使用scroll-view,则无法实现横向滚动。请求大神帮我解决这个两难的问题。


wxml代码如下:


<scroll-view scroll-x="true" class="MenuBar">

<block wx:for="{{MenuBar.MenuList}}" wx:key="{{id}}" wx:for-item="Menu">    

<view style="display:inline-block;margin:10px;" bindtap="{{MenuBar.bindtap}}" id="{{Menu.Name}}">{{Menu.Name}}

<template is="PopMenu" data="{{Pop:Menu,Style:MenuBar.MenuStyle,SubMenuHidden:MenuBar.SubMenu.Hidden}}" />


</view>

</block>

</scroll-view>



<template name="PopMenu">

<view class="PopMenuContainer" >

<view hidden='{{Pop.Hidden}}' class="PopMenu" catchtap="{{bindtap}}" id="{{Pop.Name}}">

<template is="MenuItem" data="{{Menu:Pop,Style,SubMenuHidden:SubMenuHidden}}" />

</view>

</view>

</template>



左图是添加了scroll-view之后的效果,右图是没有添加scroll-view的效果。

最后一次编辑于  2017-12-05  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

1 个回答

  • 🐷
    🐷
    2017-12-05

    看你是老乡的份上 我就告诉你怎么写  scroll-view  

    wx.getSystemInfo({

    success: function (res) {


    that.setData({

    secondHeight: res.windowHeight

    })

    },

    })


    2017-12-05
    赞同
    回复