微信小程序实例：实现顶部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: #39;title #39;, // 分享标题
 desc: #39;desc #39;, // 分享描述
 path: #39;path #39; // 分享路径
})

wxml:

 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切换以及滑动切换时导航栏会随着移动的效果（代码）的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！