1问题描述
7 q* R6 D+ R( H$ f8 `4 ~ 使用微信小程序开发者工具制作顶部导航栏。
% h `( T+ g. E
9 q1 i6 T9 I* M+ C6 `- ~2算法描述: I$ T) F; [. B# Y2 K' U# t
! V' P( }9 m3 \' X
首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载。
6 R: D1 T9 p; X0 |* V* o
0 ~, k5 _6 }& T* s) A/ F: {' k8 m
. j# k! [2 X! @3 R( u6 g5 x, E
然后点开开发者工具,选择小程序,点击图片位置的加号,进入创建页面,可以更改项目名称和文件所在目录。
0 {* D1 c2 o/ u; O! C 注意,在AppID中我们先选择使用测试号,然后点击确定9 u, T. ^9 v% j, ]
进入程序后,选择index.js文件,编辑data内容,再在index.wxml文件中加上文字页面,index.wxss文件中可以更改获取的图片信息。
' X1 b# F5 H$ z% W& z 要注意的是,最好不要直接在微信开发者工具中写代码,这里可以使用vscode,使用Java工具。
5 b) q2 W5 Y, n9 u0 c2 R3 代码7 E- \* V# A6 T7 U8 ~, t& ~
7 B& F; }6 g4 Z) a3 T- {
- 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;
- }
|