1问题描述
4 @$ d% @( z- f6 A 使用微信小程序开发者工具制作顶部导航栏。
# k% w4 b5 @/ u& ~
9 v) O0 V P- {/ R, n2算法描述4 d; x9 k' X) P. X$ ]0 b* A
! | R" k, f/ H2 G- f8 U, m9 A 首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载。
: M' L3 {' z: |3 R; N7 m1 f3 I
: U7 b6 ~4 n4 n* a* N7 h, |" T
" m1 g1 N% W7 U. ?- Q
然后点开开发者工具,选择小程序,点击图片位置的加号,进入创建页面,可以更改项目名称和文件所在目录。8 S# p& C* u, p7 g K
注意,在AppID中我们先选择使用测试号,然后点击确定' c; H) M& y9 o/ v2 | |
进入程序后,选择index.js文件,编辑data内容,再在index.wxml文件中加上文字页面,index.wxss文件中可以更改获取的图片信息。( e4 k0 i+ R, }# C- r6 }
要注意的是,最好不要直接在微信开发者工具中写代码,这里可以使用vscode,使用Java工具。
3 F* u; h" y( g* u& d+ f1 O3 S3 代码9 W# J @7 p+ x6 R
1 V3 A/ ~3 Y4 P: J" g
- 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;
- }
|