小程序中怎么实现顶部tab切换以及滑动切换时导航栏会随着移动的效果

这篇文章给大家分享的是有关小程序中怎么实现顶部tab切换以及滑动切换时导航栏会随着移动的效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

实现的效果：

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: 'title', // 分享标题             desc: 'desc', // 分享描述             path: 'path' // 分享路径         }     } })

　　wxml:

<view class="page">     <!--顶部导航栏-->   <view class="swiper-tab">     <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Tab1</view>     <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Tab2</view>     <view class="tab-item {{currentTab==2 ? 'on' : ''}}" 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; }

感谢各位的阅读！关于“小程序中怎么实现顶部tab切换以及滑动切换时导航栏会随着移动的效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！