微信小程序之scroll-view的flex布局问题
发布时间:2020-12-14 19:25:38 所属栏目:资源 来源:网络整理
导读:关于微信小程序的scroll-view组件,第一次写的时候是直接在scroll-view中用了一层容器包裹子元素,然后用了flex布局,并且是用了组件来实现的横向滚动,后面有提出改进,但是不记录下,就发现过了几天,就有点懵了 1.效果图 2.在scroll-view里加一层容器,使
关于微信小程序的scroll-view组件,第一次写的时候是直接在scroll-view中用了一层容器包裹子元素,然后用了flex布局,并且是用了组件来实现的横向滚动,后面有提出改进,但是不记录下,就发现过了几天,就有点懵了 1.效果图2.在scroll-view里加一层容器,使用flex布局实现这里用flex布局实现的话,就要用组件的形式
.scrollView{
padding: 0 20rpx;
white-space: nowrap;
box-sizing: border-box;
}
.item{
display: inline-block;
margin-right: width: calc(100% / 3);
height: 100rpx;
background: #ff00ff;
}
.scrollView1{
display: flex;
margin-top: 40rpx;
width: 100%;
flex-wrap: nowrap;
.item1{
#ff00ff;
}
.scrollView2{
.itemContainer{
flex-wrap: nowrap;
}
.scrollItem{
20rpx;
}
.scrollView3{
.item3{
20rpx;
/* width: calc(100% / 3); */
240rpx;
#aa22dd;
}
<!-- 要想使用flex布局实现横向滚动,就要在scroll-view里加一层容器包裹,并且使用子组件才会出现滚动效果 -->
<scroll-view scroll-x class="scrollView2">
<view class="itemContainer">
<block wx:for="{{4}}" wx:key={{index}}">
<view-item class="scrollItem" />
</block>
</view>
</scroll-view>
3.直接使用display:inline-block
4.自己的理解正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |