WeChatアプレットのスクロールタブで左右のスライド切り替えを実現する方法の分析例

この記事では、左右のスライド切り替えを実現するための WeChat アプレット スクロール タブに関する関連情報を主に紹介します。そのような機能を実現するための実装例を示します。左右スライド切り替え

エフェクト:

最終的なエフェクトは上記の通りです。問題:

1. タブ タイトルが合計 8 つあるため、1 つの画面にすべてを表示できません。
2. タブコンテンツエリアを左右にスライドして切り替えると、すぐにタブタイトルがマーク（アクティブ）になります。

3. アクティブなタイトルが現在の画面に表示されていない場合は、現在の画面に表示する必要があります。

1. wxml の構造

タブのタイトルは 8 つ連続しているため、横方向にスクロールできるようにするために、scroll-view コンポーネントが使用されます。

スワイパーコンポーネントを使用して、タブのコンテンツを左右に切り替えることができます。

遅延させるために、データは wx:for traversal を通じて繰り返されます。

手順:

1. data-current 属性の設定は、次の目的で使用されます: 現在の項目がクリックされたとき、クリックのターゲット値は、クリック イベント swichNav で e.dataset.current を処理することによって取得されます。

2. スワイパー コンポーネントの現在のコンポーネントは、現在表示されているページを制御するために使用されます

3. スワイパー コンポーネントは、変更イベント switchTab をバインドし、e.detail.current

<view >
  <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
    <view class="tab-item {{currentTab==0?&#39;active&#39;:&#39;&#39;}}" data-current="0" bindtap="swichNav">健康</view>
    <view class="tab-item {{currentTab==1?&#39;active&#39;:&#39;&#39;}}" data-current="1" bindtap="swichNav">情感</view>
    <view class="tab-item {{currentTab==2?&#39;active&#39;:&#39;&#39;}}" data-current="2" bindtap="swichNav">职场</view>
    <view class="tab-item {{currentTab==3?&#39;active&#39;:&#39;&#39;}}" data-current="3" bindtap="swichNav">育儿</view>
    <view class="tab-item {{currentTab==4?&#39;active&#39;:&#39;&#39;}}" data-current="4" bindtap="swichNav">纠纷</view>
    <view class="tab-item {{currentTab==5?&#39;active&#39;:&#39;&#39;}}" data-current="5" bindtap="swichNav">青葱</view>
    <view class="tab-item {{currentTab==6?&#39;active&#39;:&#39;&#39;}}" data-current="6" bindtap="swichNav">全部</view>
    <view class="tab-item {{currentTab==7?&#39;active&#39;:&#39;&#39;}}" data-current="7" bindtap="swichNav">其他</view>
  </scroll-view>
  <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab"
   style="height:{{winHeight}}rpx">
    <swiper-item wx:for="{{[0,1,2,3,4,5,6,7]}}">
      <scroll-view scroll-y="true" class="scoll-h" >
        <block wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="*this">
          <view class="item-ans">
            <view class="avatar">
              <image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
            </view>
            <view class="expertInfo">
              <view class="name">欢颜</view>
              <view class="tag">知名情感博主</view>
              <view class="answerHistory">134个回答，2234人听过 </view>
            </view>
            <navigator url="/pages/askExpert/expertDetail" class="askBtn">问TA</navigator> 
          </view>
        </block>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

を通じて現在のページを取得します。 2. js 部分

WeChat アプレットが開発されると、データを使用してビューの更新を駆動する Vue に非常によく似ていると個人的に感じます。そのため、小さなプログラムではDOMを直接操作することはできませんし、当然jqueryなどのライブラリも使用できません。

りー

3. wxss スタイル

りー

以上がWeChatアプレットのスクロールタブで左右のスライド切り替えを実現する方法の分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。