微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏

固定导航栏
可滑动导航栏

顶部导航栏的需求实现：

顶部导航栏由列表渲染，通过tabclick点击事件改变activeIndex变量的当前值，从而控制weui-navbar-item的切换。
wxml获取activeIndex的当前值，通过view组件的hidden="{{activeIndex!=x}}"属性选择性隐藏其余activeIndex下的页面，只显示当前activeIndex下的页面，当然也可以适当修改wxml灵活选择不同的页面显示或隐藏。

固定导航栏和可滑动导航栏区别在于：

效果上：可滑动导航栏承载的页面数量远超过固定导航栏，不仅可以滑动导航栏，而且点击边缘处的native-item时会自动使native-item处于页面中；
原理上：tabClick点击事件只是单单改变activeIndex的当前值，switchNav点击事件除此之外同时改变navScrollLeft的大小以实时改变scroll-view组件的scroll-left属性，达成切换页面时的动画效果。

固定导航栏

效果示意图：

代码：
wxml

<view class="page"><view class="page__bd"><view class="weui-tab"><view class="weui-navbar"><block wx:for="{{tabs}}" wx:key="*this"><view id="{{index}}" class="weui-navbar-item {{activeIndex == index ? 'weui-navbar-item-on' : ''}}" bindtap="tabClick"><view class="weui-navbar__title">{{item}}</view></view></block></view><view class="weui-tab__panel"><!-- 第1个页面 --><view class="weui-tab_content" hidden="{{activeIndex != 0}}">1</view><!-- 第2个页面 --><view class="weui-tab_content" hidden="{{activeIndex != 1}}">2</view><!-- 第3个页面 --><view class="weui-tab_content" hidden="{{activeIndex != 2}}">3</view><!-- 第4个页面 --><view class="weui-tab_content" hidden="{{activeIndex != 3}}">4</view><!-- 第5个页面 --><view class="weui-tab_content" hidden="{{activeIndex != 4}}">5</view></view></view></view>
</view>

var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
const app = getApp()
Page({data: {tabs: ["标题A", "标题B", "标题C", "标题D", "标题E"],activeIndex: 0,sliderOffset: 0,sliderLeft: 0},onLoad: function (options) {var that = this;wx.getSystemInfo({success: function (res) {that.setData({sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex});}});that.setData({activeIndex: options.activeIndexData})},tabClick: function (e) {this.setData({sliderOffset: e.currentTarget.offsetLeft,activeIndex: e.currentTarget.id})}
})

wxss

page,
.page,
.page__bd {height: 100%;
}
.page__bd {padding-bottom: 0;
}
.weui-tab_content {padding-top: 60px;text-align: center;font-size: 32rpx;
}
.weui-navbar {display: flex;position: absolute;left: 0;top: 0;z-index: 500;width: 100%;height: 95rpx;flex-direction: row;text-align: center;color: #A8A8A8;font-size: 32rpx;box-sizing: border-box;background-color: #FFF;border-bottom: 1rpx solid #DFDFDF;
}
.weui-navbar-item {flex: 1;padding: 26rpx 0px;
}
.weui-navbar-item-on {transition: all 0.3s;border-bottom: 10rpx solid #478ff3;color: #478ff3;
}

可滑动导航栏

效果示意图：

代码：
wxml

<view class="page"><!-- tab导航栏 --><scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}"><block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx"><view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav"><text>{{navItem}}</text></view></block></scroll-view><!-- 页面内容 --><view class="weui-tab__panel"><!-- 第1个页面 --><view class="weui-tab_content" hidden="{{currentTab != 0}}">1</view><!-- 第2个页面 --><view class="weui-tab_content" hidden="{{currentTab != 1}}">2</view><!-- 第3个页面 --><view class="weui-tab_content" hidden="{{currentTab != 2}}">3</view><!-- 第4个页面 --><view class="weui-tab_content" hidden="{{currentTab != 3}}">4</view><!-- 第5个页面 --><view class="weui-tab_content" hidden="{{currentTab != 4}}">5</view><!-- 第6个页面 --><view class="weui-tab_content" hidden="{{currentTab != 5}}">6</view><!-- 第7个页面 --><view class="weui-tab_content" hidden="{{currentTab != 6}}">7</view><!-- 第8个页面 --><view class="weui-tab_content" hidden="{{currentTab != 7}}">8</view></view>
</view>

var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
const app = getApp()
Page({data: {navData: ["标题A", "标题B", "标题C", "标题D", "标题E", "标题F", "标题G", "标题H"],currentTab: 0,navScrollLeft: 0,},onLoad() {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/5var singleNavWidth = this.data.windowWidth / 5;//tab选项居中                            this.setData({navScrollLeft: (cur - 2) * singleNavWidth})if (this.data.currentTab == cur) {return false;} else {this.setData({currentTab: cur})}}
})

wxss

.weui-tab_content {padding-top: 100rpx;text-align: center;font-size: 32rpx;
}
.nav {height: 86rpx;text-align: center;color: #A8A8A8;font-size: 4vw;background-color: #FFF;border-bottom: 1rpx solid #DFDFDF;width: 100%;box-sizing: border-box;overflow: hidden;line-height: 80rpx;white-space: nowrap;position: fixed;top: 0;left: 0;z-index: 99;
}
.nav-item {width: 22%;display: inline-block;text-align: center;
}
.nav-item.active {transition: all 0.3s;border-bottom: 10rpx solid #478ff3;color: #478ff3;
}

微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏相关推荐

微信小程序解决自定义顶部导航栏被键盘挤压的问题
解决思路: 先把键盘的adjust-position置为false,防止键盘自动挤压.然后计算键盘弹起时,input实际被遮挡的高度,通过代码来上滑相应的距离 wxml代码: < ...
微信小程序，自定义导航栏组件
微信小程序,自定义导航栏组件,可兼容iPhone 11及以上留海屏显示,关于参数获取设置参照微信小程序-收藏_羽筠的博客-CSDN博客可定义设置的内容如下: 文字及返回箭头颜色背景图片(优先级高于 ...
微信小程序的自定义导航栏
微信小程序的导航栏主要分为两个部分:状态栏和标题栏. 关于微信小程序的自定义导航栏也就是通过微信小程序官方提供的API接口来算出状态栏和标题栏的高度. 注意获取到的数值单位都是px. 首先要开启自定义 ...
关于微信小程序如何去掉顶部标题，自定义标题详细讲解
关于微信小程序如何去掉顶部今天工作要求去掉小程序顶部,做成自定义样式,百度后看到一码友写的不错,附上链接:自定义小程序顶部下面是我新建后做的例子: 首先新建后结构如下:(图片是我自己添加的,用于顶 ...
【微信小程序】自定义弹窗蒙版输入框效果图完整代码
[微信小程序]自定义弹窗文本输入框效果图&完整代码效果图在输入框中进行内容的输入点击确认后在姓名一栏进行更新修改点击返回后姓名一栏不做任何修改在这个的基础上你可以自定义任何弹窗 wx ...
微信小程序wepy自定义card控件封装
微信小程序wepy自定义card控件在利用wepy开发小程序的过程中,需要使用自定义控件来实现,但是很多时候,若直接在page页面中写对应的控件,下次在另一个页面中,想使用同样的控件又需要重新绑定数 ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序可以加服务器上的字体,微信小程序中自定义字体
微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式.如果是同时加载两种字体包,先下载下来的会被后下载下来的字体包给覆盖. 官网接口文档 ...
微信小程序之自定义模态弹窗（带动画）实例
代码地址如下: http://www.demodashi.com/demo/13991.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...

微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏

微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏

固定导航栏

可滑动导航栏

微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏相关推荐

最新文章

热门文章