微信小程序实例:实现顶部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,        })     },    onl oad: 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切换以及滑动切换时导航栏会随着移动的效果(代码)的详细内容,更多请关注龙方网络其它相关文章!

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
   
验证码: