WeChat 애플릿 예: 탐색 모음이 움직일 때 상단 탭 전환 및 슬라이딩 전환 효과 실현(코드)-미니 프로그램 개발-php.cn

WeChat 애플릿 예: 탐색 모음이 움직일 때 상단 탭 전환 및 슬라이딩 전환 효과 실현(코드)

不言

풀어 주다： 2018-08-10 14:30:07

원래의

12344명이 탐색했습니다.

이 글의 내용은 위챗 애플릿 예제에 관한 것입니다: 탐색 바가 함께 움직일 때의 상단 탭 전환과 슬라이딩 전환의 효과를 구현하는 것입니다(코드). 필요한 친구들이 참고할 수 있기를 바랍니다. 당신을 도와줍니다.

달성된 효과:

js:

Page({
    data: {
        // tab切换  
        currentTab: 0,
    },
    swichNav: function (e) {
        console.log(e);
        var that = this;
        if (this.data.currentTab === e.target.dataset.current) {
            return false;
        } else {
            that.setData({
                currentTab: e.target.dataset.current,
            })
        }
    },
    swiperChange: function (e) {
        console.log(e);
        this.setData({
            currentTab: e.detail.current,
        })
 
    },
    onLoad: function (options) {
        // 生命周期函数--监听页面加载
    },
    onReady: function () {
        // 生命周期函数--监听页面初次渲染完成
    },
    onShow: function () {
        // 生命周期函数--监听页面显示
    },
    onHide: function () {
        // 生命周期函数--监听页面隐藏
    },
    onUnload: function () {
        // 生命周期函数--监听页面卸载
    },
    onPullDownRefresh: function () {
        // 页面相关事件处理函数--监听用户下拉动作
    },
    onReachBottom: function () {
        // 页面上拉触底事件的处理函数
    },
    onShareAppMessage: function () {
        // 用户点击右上角分享
        return {
            title: &#39;title&#39;, // 分享标题
            desc: &#39;desc&#39;, // 分享描述
            path: &#39;path&#39; // 分享路径
        }
    }
})

로그인 후 복사

　 wxml:

<view class="page">
 
  <!--顶部导航栏-->
  <view class="swiper-tab">
    <view class="tab-item {{currentTab==0 ? &#39;on&#39; : &#39;&#39;}}" data-current="0" bindtap="swichNav">Tab1</view>
    <view class="tab-item {{currentTab==1 ? &#39;on&#39; : &#39;&#39;}}" data-current="1" bindtap="swichNav">Tab2</view>
    <view class="tab-item {{currentTab==2 ? &#39;on&#39; : &#39;&#39;}}" data-current="2" bindtap="swichNav">Tab3</view>
  </view>
 
  <!--内容主体-->
  <swiper class="swiper" current="{{currentTab}}" duration="200" bindchange="swiperChange">
    <swiper-item>
      <view>我是tab1</view>
    </swiper-item>
    <swiper-item>
      <view>我是tab2</view>
    </swiper-item>
    <swiper-item>
      <view>我是tab3</view>
    </swiper-item>
  </swiper>
</view>

로그인 후 복사

wxss:

.page {
  margin-left: 10rpx;
  margin-right: 10rpx;
}
 
.swiper-tab {
  display: flex;
  flex-direction: row;
  line-height: 80rpx;
  border-bottom: 2rpx solid #777;
}
 
.tab-item {
  width: 33.3%;
  text-align: center;
  font-size: 15px;
  color: #777;
}
 
.swiper {
  height: 1100px;
  background: #dfdfdf;
}
 
.on {
  color: blue;
  border-bottom: 5rpx solid blue;
}

로그인 후 복사