关于微信小程序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; }
阅读更多
相关文章推荐
- 微信小程序scroll-view横向滑动嵌套for循环的示例代码
- 微信小程序scroll-view仿拼多多横向滑动滚动条
- 微信小程序开发——scroll-view横向滑动
- 微信小程序-横向滑动scroll-view隐藏滚动条
- 微信小程序-横向滑动scroll-view隐藏滚动条
- 关于 HorizontalScrollView 横向滚动,显示不全问题。
- 小程序scroll-view左右滑动失效问题
- 微信小程序 scroll-view横向滚动
- 【微信小程序】解决 竖向<scroll-view>组件 “竖向滚动页面出现遮挡”问题
- 微信小程序存在scroll-view为外层时,制作模拟框(全页面变成透明的黑色,出现一个模拟框)的兼容性问题
- 关于viewpager中嵌套的fragment中的listview的横向滑动的滑动冲突的问题。
- 微信小程序-scroll-view横向滚动和上拉加载
- 解决微信小程序组件scroll-view中bindscrolltolower事件触发不了的问题
- 微信小程序scroll-view横向滚动
- 微信小程序scroll-view bindscrolltoupper & bindscrolltolower不响应的问题
- 微信小程序 scroll-view实现锚点滑动的示例
- 关于仿微信滑动切换View页面的问题
- 微信小程序 scroll-view 横向划不动