WeChatアプレットのスクロールビューが左右にスライドできない問題を解決する方法

私は現在、自分自身の小さなプログラムプロジェクトに取り組んでいます。プロフェッショナルなフロントエンドではないからです。それで私は一歩ごとに穴に落ちていきました。ここで私が遭遇した問題をまとめたいと思います。ピットを繰り返さないようにしてください。

質問：

ミニプログラムページをレイアウトするときに、スクロールビューコンポーネントを使用しましたが、水平方向の移動は効果がないことがわかりました。オンラインで情報を調べて問題を見つけました。

私のwxmlコード

<scroll-view scroll-x="true" class="scroll" bindscrolltolower="lower" bindscroll="scroll">
        <view class="user_info">
          <view class="user_head">
            <画像 src="../../icon/head.jpg"></画像>
          </ビュー>
          <view class="username">張三</view>
        </ビュー>
        <view class="user_info">
          <view class="user_head">
            <画像 src="../../icon/head.jpg"></画像>
          </ビュー>
          <view class="username">張三</view>
        </ビュー>
        <view class="user_info">
          <view class="user_head">
            <画像 src="../../icon/head.jpg"></画像>
          </ビュー>
          <view class="username">張三</view>
        </ビュー>
        <view class="user_info">
          <view class="user_head">
            <画像 src="../../icon/head.jpg"></画像>
          </ビュー>
          <view class="username">張三</view>
        </ビュー>
        <view class="user_info">
          <view class="user_head">
            <画像 src="../../icon/head.jpg"></画像>
          </ビュー>
          <view class="username">張三</view>
        </ビュー>
        <view class="user_info">
          <view class="user_head">
            <画像 src="../../icon/head.jpg"></画像>
          </ビュー>
          <view class="username">張三</view>
        </ビュー>
        <view class="user_info">
          <view class="user_head">
            <画像 src="../../icon/head.jpg"></画像>
          </ビュー>
          <view class="username">張三</view>
        </ビュー>
        <view class="user_info">
          <view class="user_head">
            <画像 src="../../icon/head.jpg"></画像>
          </ビュー>
          <view class="username">張三</view>
        </ビュー>
        <view class="user_info">
          <view class="user_head">
            <画像 src="../../icon/head.jpg"></画像>
          </ビュー>
          <view class="username">張三</view>
        </ビュー>
       

      </スクロールビュー>

wxssコード

.enroll_view .scroll_view .scroll{
  高さ:160rpx;
  幅:750rpx;
  オーバーフロー: 非表示;
}
.ユーザー情報{
  フロート:左;
  上マージン:10rpx;
  高さ:140rpx;
  幅:140rpx;
}

アイデアは非常にシンプルです。float:left; を使用して、水平方向にスライドする必要がある要素を配置します。情報を調べてみると、スライドさせる必要がある要素では float を使用できないことがわかりました。この効果を実現するには、display:inline-block; を使用する必要があります。

変更を続けます（float:left; を削除し、display:inline-block; を使用してサブ要素の水平配置の効果を実現します）

wxssスタイル

.ユーザー情報{
  上マージン:10rpx;
  高さ:140rpx;
  幅:140rpx;
  表示: インラインブロック;
}

変更を加えた後でも、まだ動作しないことがわかります。そして、サブセット要素が幅を超えた後に行が折り返されることがわかりました。

したがって、スクロールビューに white-space: nowrap; を追加して、内部要素が折り返されないようにする必要があります。リフレッシュします。最終的な効果を実現します。カイセン。レンダリング

最終版wxss

.enroll_view .scroll_view .scroll{
  高さ:160rpx;
  幅:750rpx;
  オーバーフロー: 非表示;
  空白: ラップなし;
}
.ユーザー情報{
  上マージン:10rpx;
  高さ:140rpx;
  幅:140rpx;
  表示: インラインブロック;
}

結び目

1. スクロールビューでスライドする必要がある要素は、水平配置効果を実現するためにフロートさせることはできません。display:inline-block; を使用して、それらをインラインブロック要素に変更できます。

2. スライドする必要がある要素を含むスクロールビューの大きなボックスで display:flex; を使用しても効果はありません。

3. スクロールビューを囲む大きなボックスには、明確な幅とスタイル white-space:nowrap; があります。

スクロールビューの主なプロパティを次に示します。

要約する

WeChatミニプログラムのスクロールビューが左右にスライドできない問題を解決する方法についての記事はこれで終わりです。WeChatミニプログラムのスクロールビューが左右にスライドする問題に関する関連コンテンツの詳細については、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません: