navtab触底 小程序_微信小程序tab切换,可滑动切换,导航栏跟随滚动实现

//index.js//获取应用实例

const app =getApp()

Page({

data: {

motto:'Hello World',

userInfo: {},

hasUserInfo:false,

canIUse: wx.canIUse('button.open-type.getUserInfo'),

navData:[

{

text:'首页'},

{

text:'健康'},

{

text:'情感'},

{

text:'职场'},

{

text:'育儿'},

{

text:'纠纷'},

{

text:'青葱'},

{

text:'上课'},

{

text:'下课'}

],

currentTab:0,

navScrollLeft:0},//事件处理函数

onLoad: function() {if(app.globalData.userInfo) {this.setData({

userInfo: app.globalData.userInfo,

hasUserInfo:true})

}else if (this.data.canIUse) {//由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回

//所以此处加入 callback 以防止这种情况

app.userInfoReadyCallback = res =>{this.setData({

userInfo: res.userInfo,

hasUserInfo:true})

}

}else{//在没有 open-type=getUserInfo 版本的兼容处理

wx.getUserInfo({

success: res=>{

app.globalData.userInfo=res.userInfothis.setData({

userInfo: res.userInfo,

hasUserInfo:true})

}

})

}

wx.getSystemInfo({

success: (res)=>{this.setData({

pixelRatio: res.pixelRatio,

windowHeight: res.windowHeight,

windowWidth: res.windowWidth

})

},

})

},

switchNav(event){var cur =event.currentTarget.dataset.current;//每个tab选项宽度占1/5

var singleNavWidth = this.data.windowWidth / 5;//tab选项居中

this.setData({

navScrollLeft: (cur- 2) *singleNavWidth

})if (this.data.currentTab ==cur) {return false;

}else{this.setData({

currentTab: cur

})

}

},

switchTab(event){var cur =event.detail.current;var singleNavWidth = this.data.windowWidth / 5;this.setData({

currentTab: cur,

navScrollLeft: (cur- 2) *singleNavWidth

});

}

})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值