WeChatアプレットは水平および垂直スクロールを実現

この記事の例では、WeChatアプレットの水平スクロールと垂直スクロールを実現するための具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

キーポイントスワイパー内部設定スクロールビュー

知らせ：

1. 垂直スクロールの高さはパーセンテージではなくpx/rpxで指定できます。
2. スワイパーの内部アイテム位置は100%
3. スワイパーの高さに値を与える必要がある
4. 水平方向にスクロールする場合は、水平方向の幅も指定する必要があります。

コード

xml

<スワイパー class="tab-box" current="{{currentTab}}" 期間="300" bindchange="switchTab">
 <スワイパーアイテムクラス="タブコンテンツ">
 <スクロールビュークラス="スクロール高さ" スクロールy="true" スクロールアニメーション="{{true}}">
  <view class="cont">
  <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx">
  <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card>
  </ビュー>
  </ビュー>
 </スクロールビュー>

 </スワイパーアイテム>
 <スワイパーアイテムクラス="タブコンテンツ">
 <スクロールビュークラス="スクロール高さ" スクロールy="true" スクロールアニメーション="{{true}}">
  <view class="cont">
  <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx">
  <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card>
  </ビュー>
  </ビュー>
 </スクロールビュー>
 </スワイパーアイテム>
 </スワイパー>

<スワイパー class="tab-box" current="{{currentTab}}" 期間="300" bindchange="switchTab">
 <スワイパーアイテムクラス="タブコンテンツ">
 <スクロールビュークラス="スクロール高さ" スクロールy="true" スクロールアニメーション="{{true}}">
  <view class="cont">
  <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx">
  <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card>
  </ビュー>
  </ビュー>
 </スクロールビュー>

 </スワイパーアイテム>
 <スワイパーアイテムクラス="タブコンテンツ">
 <スクロールビュークラス="スクロール高さ" スクロールy="true" スクロールアニメーション="{{true}}">
  <view class="cont">
  <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx">
  <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card>
  </ビュー>
  </ビュー>
 </スクロールビュー>
 </スワイパーアイテム>
</スワイパー>

wxss

.タブボックス{
 高さ: 1040rpx;
}
.スクロール高さ{
高さ: 1040rpx;
}

マイ監査(){
 this.setData({
 現在のタブ:0,
 })
},
マイイニシエート(){
 this.setData({
 現在のタブ:1,
 // jira配列:[]
 })
},
switchTab(イベント){
 var cur = イベントの詳細.current;
 var singleNavWidth = this.data.windowWidth / 5;
 this.setData({
 現在のタブ: cur,
 navScrollLeft: (現在 - 2) * シングルナビゲーション幅
 });
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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