WeChat アプレットに関するよくある質問 (基本記事) は継続的に更新されています。

1. スクロールビュービューコンポーネントの横スクロールの実装

WeChat 公式ドキュメントに従って、scroll-x とenable-flex を追加した後も、水平スクロールはまだ実現できません。1.
スクロールとスタイルを許可するために、scroll-x をスクロールビュー コンポーネントに追加します。display: inline-block;
2. に追加します。スクロールする必要があるビュー要素 スタイル:white-space:nowrap;

wxmlコード:

<scroll-view class="content1" scroll-x>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>

wxssコード:

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; /* 第二步 */
}

レンダリング: