关于微信小程序的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: 20rpx;
width: calc(100% / 3);
height: 100rpx;
background: #ff00ff;
}
.scrollView1{
display: flex;
margin-top: 40rpx;
padding: 0 20rpx;
width: 100%;
flex-wrap: nowrap;
box-sizing: border-box;
}
.item1{
margin-right: 20rpx;
width: calc(100% / 3);
height: 100rpx;
background: #ff00ff;
}
.scrollView2{
margin-top: 40rpx;
padding: 0 20rpx;
width: 100%;
box-sizing: border-box;
}
.itemContainer{
display: flex;
width: 100%;
flex-wrap: nowrap;
}
.scrollItem{
margin-right: 20rpx;
}
.scrollView3{
margin-top: 40rpx;
padding: 0 20rpx;
width: 100%;
box-sizing: border-box;
}
.item3{
margin-right: 20rpx;
/* width: calc(100% / 3); */
width: 240rpx;
height: 100rpx;
background: #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
<scroll-view scroll-x class="scrollView"> <block wx:for="{{4}}" wx:key="{{index}}"> <view class="item"></view> </block> </scroll-view>
4.自己的理解
正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^) |
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。
- 微信扫描二维码关注官方微信
- ▲长按图片识别二维码