微信小程序制作顶部导航栏

1问题描述

使用微信小程序开发者工具制作顶部导航栏。

2算法描述

首先就是对微信小程序开发者工具的配置，官网搜索后进入，选择稳定版，Windows64位下载。

然后点开开发者工具，选择小程序，点击图片位置的加号，进入创建页面，可以更改项目名称和文件所在目录。

注意，在AppID中我们先选择使用测试号，然后点击确定

进入程序后，选择index.js文件，编辑data内容，再在index.wxml文件中加上文字页面，index.wxss文件中可以更改获取的图片信息。

要注意的是，最好不要直接在微信开发者工具中写代码，这里可以使用vscode，使用Java工具。

3 代码

index.jx
var app = getApp()
Page({
data: {
navbar: ['科普点', '动物场馆', '游览点','卫生间'],
currentTab: 0
},
navbarTap: function(e){
this.setData({
currentTab: e.currentTarget.dataset.idx
})
}
})
index.wxml

<view class="navbar">
<text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
</view>

<view hidden="{{currentTab!==0}}">
tab_01
</view>

<view hidden="{{currentTab!==1}}">
tab_02
</view>

<view hidden="{{currentTab!==2}}">
tab_03
</view>
index.wxss
page{
display: flex;
flex-direction: column;
height: 100%;
}
.navbar{
flex: none;
display: flex;
background: #fff;
}
.navbar .item{
position: relative;
flex: auto;
text-align: center;
line-height: 80rpx;
}
.navbar .item.active{
color: #FFCC00;
}
.navbar .item.active:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4rpx;
background: #FFCC00;
}

4 结语

本次学习了微信小程序中顶部导航栏的制作。

实习编辑：李欣容

稿件来源：深度学习与文旅应用实验室（DLETA）

微信小程序制作顶部导航栏相关推荐

微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏效果图: wxml:  <view class="navbar"><text wx:for="{{na ...
微信小程序实现顶部导航栏渐变
在小程序开发的过程中,会遇到一些页面上的要求,要求实现顶部导航栏的渐变如何实现,因为小程序做了一些封装,下面看看页面的布局图: 如图所示,实际上我们能够操作的页面只有中间那一块,那么,如果客户需要使用 ...
uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
微信小程序中顶部导航栏全局切换
一.场景微信小程序和企业微信小程序共用一个,从不同入口进入小程序显示不同的顶部导航栏二.思路 1.app.json中全局设置只能写死一个,无法实现 2.app.js中直接使用wx.setNavig ...
微信小程序自定义顶部导航栏navigationBar
自定义navigationBar怎么做? 去掉原生导航栏. 将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉. 加上"navi ...
微信小程序开发 — 顶部导航栏
直接看代码吧,第一部分是wxml部分 <view class='nav'><text class='{{curNum==index?"cur":"&qu ...
微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）
设置标题栏标题栏window 在app.json文件里面,通过window对象里面的属性进行设置示例: app.json: 运行: 设置导航栏导航栏TabBar 如果我们的小程序是一个多 tab ...

微信小程序制作顶部导航栏

微信小程序制作顶部导航栏相关推荐

最新文章

热门文章