WeChatアプレットのスクロールビューコンテナの実装方法について-ミニプログラム開発-php.cn

WeChatアプレットのスクロールビューコンテナの実装方法について

不言

リリース： 2018-06-26 16:13:08

オリジナル

2908 人が閲覧しました

この記事では、主に WeChat アプレットのスクロールビューコンテナーの実装方法に関する関連情報を紹介します。この記事が、この部分の内容を習得するのに役立つことを願っています。アプレットコンテナの実装方法

2 つのソリューションのコードとレンダリングを直接アップロードします:

オプション 1

このソリューションは、ビューを直接使用し、オーバーフローを設定することです: スクロール

wxml:
 <view class="container">
  <view class="content" wx:for="{{11}}" wx:key="item">
    {{item}}
  </view>
</view>

ログイン後にコピー

wxss :

 .container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: scroll;
  padding-bottom: 20rpx;
  background: #FD9494;
}

.content {
  margin: 20rpx auto 0 auto;
  width: 710rpx;
  height: 300rpx;
  background: #ddd;
  border-radius: 16rpx;
  font-size: 80rpx;
  line-height: 300rpx;
  text-align: center;
}

ログイン後にコピー

レンダリング:

オプション 2

スクロールビュー + コンテナをコンテナとして使用します

wxml:

<scroll-view class="main_container" scroll-y>
  <view class="container">
    <view class="content" wx:for="{{11}}" wx:key="item">
      {{item}}
    </view>
  </view>
</scroll-view>

ログイン後にコピー

wxss:

りー

レンダリング :

比較結果 :