微信小程序实现顶部导航特效

本文实例为大家分享了微信小程序实现顶部导航的具体代码，供大家参考，具体内容如下

之前机器人开发时，顶部导航用到查看页面，微信小程序里想要达到同样的效果，可用捣蛋鬼来实现，先看效果图

上代码：

1.swiperTab.js

页面({ data: { //选项卡切换currentTab: 0，}，swichNav:函数{控制台。日志(e)；变量=这个；如果(这个。数据。当前选项卡===e . target。数据集。当前){ return false}否则{那。setdata({当前选项卡： e . target。数据集。当前，}) }，瑞士：函数{控制台。日志(e)；这个。setdata({当前选项卡： e . detail。当前，}) }，onLoad:函数（选项){ //生命周期函数-监听页面加载}，onReady:函数(){ //生命周期函数-监听页面初次渲染完成}，onShow:函数(){ //生命周期函数-监听页面显示}，onHide:函数(){ //生命周期函数-监听页面隐藏}，onUnload:函数(){ //生命周期函数-监听页面卸载}，onPullDownRefresh:函数(){ //页面相关事件处理函数-监听用户下拉动作}，onReachBottom:函数(){ //页面上拉触底事件的处理函数}，onShareAppMessage:函数(){ //用户点击右上角分享返回{ title: 'title '，//分享标题desc: 'desc '，//分享描述路径： '路径'//分享路径} }})2.swiperTab.wxml

view class='page '！-顶部导航栏-view class=' swiper-tab ' view class=' tab-item { { CurrentTab==0？在' : ' ' } '数据-当前=' 0 '绑定上，点击=' Swichnav ' Tab 1/视图类=' tab-item { {当前Tab==1？on ' : ' ' } ' data-current=' 1 ' bind tap=' Swichnav ' Tab 2/view class=' Tab-item { { current Tab=' 2 ' ' on ' : ' ' } } ' data-current=' 2 ' bind tap=' Swichnav ' Tab 3/view/view！-内容主体-swiper class=' swiper ' current=' { { CurrentTab } } ' duration=' 200 ' bind change=' Swiprenge ' swiper-item视图我是标签1/视图/按项目切换按项目视图我是选项卡2/视图/按项目切换按项目视图我是选项卡3/视图/刷卡-项目/刷卡/视图3。斯威珀塔布。页面样式表。第{左边距： 10 rpx右边距： 10 rpx} .swiper-tab { display : flex；挠曲方向：行；线高： 80 rpx边框-底部： 2rpx实心# 777;} .tab-item {宽度： 33.3%；文本对齐：中心；font-size : 15pxcolor: # 777}。swiper { height: 1100px背景# dfdfdf }。在{ color : blue border-bottom : 5 rpx纯蓝；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。