1问题描述8 N5 B- e9 k! T& M
使用微信小程序开发者工具制作顶部导航栏。
7 }6 o' W, W/ [ U2 ^7 ? Q; Y
5 p% f3 S: a& U1 d& R
2算法描述2 n, W" x9 g! x' F& K R
$ F. O2 X( W& P; G1 m) u
首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载。
~6 B( ?% k# b
1 [5 r' K+ r$ U1 S) b; m; I
: f4 K N8 y0 o5 s4 H& J5 M 然后点开开发者工具,选择小程序,点击图片位置的加号,进入创建页面,可以更改项目名称和文件所在目录。# T- m8 J* W' I# g2 \
注意,在AppID中我们先选择使用测试号,然后点击确定# b# H5 E! z+ w' ?+ S
进入程序后,选择index.js文件,编辑data内容,再在index.wxml文件中加上文字页面,index.wxss文件中可以更改获取的图片信息。
" a7 R. U/ H# V: K6 X9 [1 @ 要注意的是,最好不要直接在微信开发者工具中写代码,这里可以使用vscode,使用Java工具。" ^: E/ S3 Z9 [8 l1 a
3 代码' O3 Y* a, c$ J( O
( c H! ^ m1 T( j7 a
- 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;
- }
|