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