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

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

成都创新互联公司长期为上1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为永定企业提供专业的网站制作、成都网站制作，永定网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

实现的效果：

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

当前名称：小程序中怎么实现顶部tab切换以及滑动切换时导航栏会随着移动的效果-创新互联
转载注明：https://www.cdcxhl.com/article30/cedcpo.html

成都网站建设公司_创新互联，为您提供外贸网站建设、网站设计、App开发、虚拟主机、企业网站制作、企业建站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联