Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
136 views
in Technique[技术] by (71.8m points)

scroll-direction=horizontal不起作用(v1.0.1-beta.6 vue语法)?

weex 中 scroller组件:设置两张图片横向水平展示,结果在实际项目中无法横向水平,还是竖直展示。在 http://dotwe.org/weex/40b8268... 中展示没问题,求解?(如下为测试代码)

<template>

<div>
    <scroller scroll-direction="horizontal" class="items-container" show-scrollbar="false">
        <image src="https://static.zhongan.com/upload/mobile/material/1483682974042.png" class="img-item" ></image>
        <image src="https://static.zhongan.com/upload/mobile/material/1481775117822.png" class="img-item last-item" ></image>
    </scroller>
    <div class="bottom-view"></div>
</div>

</template>

<style>

.items-container {
    background-color: white;
    /*height: 192px;*/
    height: 300px;
}

.img-item {
    width: 455px;
    height: 192px;
    margin-left: 20px;
}

.last-item {
    margin-right: 20px;
}

.bottom-view {
    background-color: white;
    height: 20px;
    width: 750px;
    
}

</style>


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

http://dotwe.org/weex/40b8268...中展示没问题,是因为weex playground默认选中的是weex语法,你的这种写法用weex语法中是没有问题的。你切换到Vue语法试试,应该就会出现你说的那种问题,是垂直展示的。主要是在weex中,默认屏幕宽度是750px,然后根据实际值按比例缩放。但是Vue中则不然,所以你需要给容器设置宽度,在你的items-container中设置下宽度即可,注意要放得下两张图片,才会横向,不然就会换行变成垂直布局了。http://dotwe.org/vue/f48fe4ca...


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...