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;

}

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

php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...相关推荐

微信小程序不同身份登录，显示不同的tabbar（导航栏）
微信小程序,不同身份登录不同的底部导航栏.初次遇到这个问题,菜鸟的我没有一丝丝头绪,看了几篇博客后,终于明白了.下面是总结的模板,拿去直接用就欧克. 比如一个小程序需要两个版本(用户版.商家版),并且 ...
微信小程序之创建顶部tab菜单栏切换（新手学习）
关于顶部菜单tab菜单栏切换,可以有两种写法,但是都是用到swiper这个视图插件.插件介绍可以查看微信小程序开放文档. 第一种方式: 效果图 .wxml <view>tap切换方法一& ...
微信小程序 PC端与手机端显示不一致之tabBar导航栏
在编写微信小程序项目时,一开始为了显示出页面样式,我在app.json中,tabBar导航栏的list中设置了三个数组,对应三个导航块.但是三个导航块list中的pagePath设置为同一页面page ...
小程序仿微视_微信小程序仿抖音，微视上下滑动整屏切换视频带关注，收藏
废话不多说直接附代码 wxml 收藏分享电话关闭 @{{item.reallyName}} {{item.workProvince}}{{item.workCity}}{{item.workCo ...
android仿抖音上下切换视频,微信小程序仿抖音视频之整屏上下切换功能的实现代码...
Page({ /** * 页面的初始数据 */ data: { video_list:[ {video_src:}, {video_src:}, {video_src:}, {video_src:}, ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
黑马优购_微信小程序
黑马优购_微信小程序项目介绍 2021年5月6日-2021年5月12日在校参加微信小程序培训,由黑马讲师授课,能够利用微信提供的组件和API实现轮播图.授权用户信息.上拉加载更多等功能,由于之前对u ...
微信小程序利用scroll-view和swiper实现图片滚动切换
微信小程序利用scroll-view和swiper实现图片滚动切换 <view class="starbox"><view class="starare ...
微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统-翟东平-专题视频课程...
微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统-2445人已学习课程介绍微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识. 微信小 ...

php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...

php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...相关推荐

最新文章

热门文章