위챗 미니프로그램 탭과 스와이프 결합효과 구현

이 글은 탭과 스와이퍼 전환의 결합 효과를 달성하기 위한 WeChat 애플릿을 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

이 문서의 예는 참고용으로 미니 프로그램의 탭 및 스와이퍼 전환 효과를 표시하기 위한 특정 코드를 공유합니다. 코드는 다음과 같습니다:

wxml 페이지

<scroll-view scroll-x="true" class="weui-navbar">
  <block wx:for-items="{{tabs}}">
  <view id="{{index}}" class="{{activeIndex == index ?&#39;item_on&#39;:&#39;&#39;}} default-item" bindtap="tabClick" style="width:{{tabW}}px">
  {{item}}
  </view>
 </block>
 <view class="weui-navbar-slider" style="transform:translateX({{slideOffset}}px);"></view>
</scroll-view>
<view class="rec" />
<swiper current="{{activeIndex}}" class="swiper-box" duration="100" bindchange="bindChange">
 <swiper-item class="swiper-item">
  <view class="slide-view">tab0</view>
 </swiper-item>
  <swiper-item class="swiper-item">
  <view class="slide-view">tab1</view>
 </swiper-item>
  <swiper-item class="swiper-item">
  <view class="slide-view">tab2</view>
 </swiper-item>
  <swiper-item class="swiper-item">
  <view class="slide-view">tab3</view>
 </swiper-item>
 <swiper-item class="swiper-item">
  <view class="slide-view">tab4</view>
 </swiper-item>
  <swiper-item class="swiper-item">
  <view class="slide-view">tab5</view>
 </swiper-item>
  <swiper-item class="swiper-item">
  <view class="slide-view">tab6</view>
 </swiper-item>
</swiper>

wxss 스타일:

page {
 height: 100%;
}
view , scroll-view{
 padding: 0px;
 margin: 0px;
}
.weui-navbar{
 width: 100%;
 position: fixed;
 border-bottom: 1px solid #00bba1;
 box-sizing: border-box;
 white-space: nowrap; 
 z-index: 100;
 background: white;
}
.rec{
 width: 100%;
 height: 7%;
}
.weui-navbar .default-item{
 /*width:25%;*/
 display: inline-block;
 text-align: center;
 font-size: 32rpx;
 box-sizing: border-box;
 height: 7%;
 padding-bottom: 20rpx;
}
.weui-navbar .item_on{
 color: #00bba1;
}
.weui-navbar-slider{
 position: absolute;
 width: 160rpx;
 height: 2px;
 content:"";
 background: #00bba1;
 bottom: 0px;
 left: 12.5rpx;
 transition: transform .3s;
}
.swiper-box{
 height: 900px;
 border-bottom: 1px solid #d1d1d1;
}
.swiper-box .swiper-item{
 text-align: center;
 padding-top: 200rpx;
 height: 100%;
}

js 코드:

//index.js
//获取应用实例
var app = getApp();
var mtabW;
Page({
 data: {
 tabs:["综合与绘画","艺术喷漆","泥塑","纸面绘画","布面绘画","中国油画","水墨画"],
 activeIndex:0,
 slideOffset:0,
 tabW:0
 },
 //事件处理函数
 onLoad: function () {
  var that = this;
  wx.getSystemInfo({
   success: function (res) {
    mtabW = res.windowWidth / 4; //设置tab的宽度
    that.setData({
     tabW:mtabW
    })
   }
  });

 },
 bindViewTap: function() {
 wx.navigateTo({
  url: '../logs/logs'
 })
 },
 tabClick:function(e){
  var that = this;
  var idIndex = e.currentTarget.id;
  var offsetW = e.currentTarget.offsetLeft; //2种方法获取距离文档左边有多少距离
  this.setData({
  activeIndex:idIndex,
  slideOffset:offsetW
  });
 },
 bindChange:function(e){
  var current = e.detail.current;
  if((current+1)%4 == 0){

  }
  var offsetW = current * mtabW; //2种方法获取距离文档左边有多少距离
  this.setData({
   activeIndex:current,
   slideOffset:offsetW
  });

 }

})

관련 추천:

vue 자세한 설명 swiper의 컴포넌트 개발 구현

Swiper 컴포넌트를 사용하여 이미지 캐러셀 전환 기능을 구현하는 방법에 대한 WeChat Mini 튜토리얼

WeChat 애플릿이 상단 일반 탭의 비스위퍼 효과를 구현하는 방법의 예

위 내용은 위챗 미니프로그램 탭과 스와이프 결합효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!