您的位置:首页 > 移动开发 > 微信开发

关于微信小程序scroll-view横向滑动问题

2018-09-11 10:53 741 查看

看到网上很多关于小程序scroll-view之内不能使用弹性盒子的说法,还有一些样式感觉都不是很详尽,故写此篇

首先,在写scroll-view时,我们最好先给他一个父view,来专门控制scroll-view的宽高,以便于来各种定位和扩展,接着我们将要滑动的子元素·也包装进一个父view,让这个view宽度随子元素扩展,高度则不变,然后将这个view放入scroll-view中,就完成了,看以下代码

[code]<view id='fa'>
<scroll-view scroll-x>
<view id='scroll_box'>
<view class='single' wx:for="{{[1,1,1,1,1,1,1]}}" wx:key="tests">
<image src='./failed.png'></image>
<text>哈哈</text>
</view>
</view>
</scroll-view>
</view>
[code]#fa{
width: 100%;
height: 200rpx;
}
#fa scroll-view{
width: 100%;
height: 100%;
/*下面的也可放到这white-space: nowrap;*/
}
#scroll_box{
width: auto;
height: 200rpx;
overflow: auto;
white-space: nowrap;/*父元素与其取其一*/
display: inline-block;/*也可这样display:inline-flex*/
}
.single{
width: 150rpx;
height: 200rpx;
display: inline-flex;
flex-direction: column;
align-items: center;
}
.single image{
width: 150rpx;
height: 150rpx;
}
.single text{
font-size: 30rpx;
}

 

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: