1. Implementation of horizontal scrolling of scroll-view view component
After adding scroll-x and enable-flex according to WeChat official documents, horizontal scrolling still cannot be achieved.
1. Add scroll-x to the scroll-view component to allow scrolling and style: display: inline-block;
2. Add to the view element that needs to scroll Style: white-space: nowrap;
wxml code:
<scroll-view class="content1" scroll-x>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
wxss code:
view{
width: 200rpx;
height: 200rpx;
text-align: center;
line-height: 200rpx;
/* 解决横向滚动问题 */
display: inline-block; /* 第一步 */
}
view:first-child{
background-color: lightgreen;
}
view:nth-child(2){
background-color: lightskyblue;
}
view:last-child{
background-color: lightpink;
}
.content1{
height: 200rpx;
width: 240rpx;
border: 1px solid red;
white-space: nowrap; /* 第二步 */
}
Renderings:
