WeChat 애플릿은 간단한 탭 슬라이딩 전환 방법(코드)을 구현합니다.-미니 프로그램 개발-php.cn

WeChat 애플릿은 간단한 탭 슬라이딩 전환 방법(코드)을 구현합니다.

不言

풀어 주다： 2018-08-16 17:57:22

원래의

4377명이 탐색했습니다.

위챗 애플릿에서 간단한 탭 슬라이딩 전환 방식(코드)을 구현한 내용입니다. 도움이 필요한 친구들에게 도움이 되었으면 좋겠습니다. .

최근 소규모 프로그램 프로젝트를 진행하고 있는데 요구사항이 달라서 정말 귀찮습니다. 이전에 만든 주문 페이지는 클릭만 하면 전환이 가능했는데, 나중에는 요구사항이 바뀌었습니다. 슬라이딩 전환이 가능하다고 언급했는데, 아래에는 비교적 간단하고 강력한 슬라이딩 전환 방법을 정리하여 공유해 드립니다. (길 위의 초보, 마음에 들지 않으면 댓글을 달지 마세요):

.wxml

<!--pages/mine/order/order.wxml-->
<view class=&#39;order&#39;>
  <view class="swiper-tab">
    <view class="swiper-tab-item {{currentTab==0?&#39;active&#39;:&#39;&#39;}}" data-current="0" bindtap="clickTab">代付款</view>
    <view class="swiper-tab-item {{currentTab==1?&#39;active&#39;:&#39;&#39;}}" data-current="1" bindtap="clickTab">代发货</view>
    <view class="swiper-tab-item {{currentTab==2?&#39;active&#39;:&#39;&#39;}}" data-current="2" bindtap="clickTab">待收货</view>
    <view class="swiper-tab-item {{currentTab==3?&#39;active&#39;:&#39;&#39;}}" data-current="3" bindtap="clickTab">待评价</view>
    <view class="swiper-tab-item {{currentTab==4?&#39;active&#39;:&#39;&#39;}}" data-current="4" bindtap="clickTab">退款/售后</view>
  </view>
  <swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
    <swiper-item>
      <view>代付款</view>
    </swiper-item>
    <swiper-item>
      <view>代发货</view>
    </swiper-item>
    <swiper-item>
      <view>待收货</view>
    </swiper-item>
    <swiper-item>
      <view>待评价</view>
    </swiper-item>
    <swiper-item>
      <view>退款/售后</view>
    </swiper-item>
  </swiper>
</view>

로그인 후 복사

.wxss#🎜 🎜#

/* pages/mine/order/order.wxss */
.swiper-tab {
    width: 100%;
    border-bottom: 2rpx solid #ccc;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}

.swiper-tab-item {
    width: 30%;
    color: #434343;
    font-size: 28rpx;
}

.active {
    color: #f65959;
    border-bottom: 4rpx solid #f65959;
}

swiper {
    text-align: center;
    background-color: #fff
}

로그인 후 복사

#🎜 🎜#

.js

// pages/mine/order/order.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentTab: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },
  //滑动切换
  swiperTab: function (e) {
    this.setData({
      currentTab: e.detail.current
    });
  },

  //点击切换
  clickTab: function (e) {
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      this.setData({
        currentTab: e.target.dataset.current
      })
    }
  }
  
})

로그인 후 복사

렌더링:
# 🎜 🎜#
#🎜 🎜#wxml 부분에서 실제로 wx:for를 사용할 수 있습니다.
관련 추천:

WeChat 미니 프로그램 예: 캐러셀 차트의 코드 구현 및 분석

WeChat 미니 프로그램 프로그램 하단 네비게이션 바 구현 코드
위 내용은 WeChat 애플릿은 간단한 탭 슬라이딩 전환 방법(코드)을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!