php 实现tab切换_微信小程序实例：实现顶部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:

Tab1

Tab2

Tab3

我是tab1

我是tab2

我是tab3

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;

}

相关文章推荐：微信小程序中如何实现列表渲染多层嵌套循环