小程序之Tab切换(二)

之前写的那个Tab切换是常规逻辑写的,接下来我会列出小程序api自带的写法,当然了 这个写法更加简单,实用。我们只需要配置app.json这个文件即可。

先看效果图:

app.json代码:(有木有感觉很简单的样子哈哈)

"tabBar": {
    "color":"#fff",
    "selectedColor":"#1296db",
    "backgroundColor":"#ccc",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath":"images/iconHome.png",
        "selectedIconPath":"images/seleHome.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "地址",
        "iconPath": "images/iconMap.png",
        "selectedIconPath": "images/seleMap.png"
      }
    ]
  },

?下面是app.json 配置项列表:

?tabBar属性说明:

?list的属性说明:

PS:

  1. 当设置 position 为 top 时,将不会显示 icon
  2. tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

原文地址:https://www.cnblogs.com/silent007/p/8656274.html

时间: 2024-10-10 20:55:03

小程序之Tab切换(二)的相关文章

小程序之 tab切换(选项卡)

好久没有写东西了   今天写一个简单的东西 小程序tab切换 (选项卡功能) .wxml <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">111</view> <view class=&quo

小程序之Tab切换

小程序越来越火了,作为一名,额  有理想的攻城狮,当然要紧跟互联网时代的步伐啦,于是我赶紧抽时间学习了一下小程序的开发,顺便把经验分享给大家. 对于申请账号以及安装开发工具等,大家可以看官网:https://mp.weixin.qq.com/debug/wxadoc/dev/. ●先上成果 .wxml代码: <view class='container'> <!-- 底部导航 --> <view class='bottom-nav'> <view class='t

微信小程序 导航tab切换,跟随滚动置顶

<view class="small_nav {{tabFixed?'small_navFix':''}}" id="tab-con"> <scroll-view scroll-x="true" scroll-left="{{scrollLeft}}"> <view class="small_nav_scroll"> <view class="{{id==

微信小程序动态生成保存二维码

起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <canvas style="width: 350rpx;height: 350rpx;background:#f1f1f1;" canvas-id="mycanvas"/> js: // pages/qrcode/qrcode.js var QR = require("..

小程序--首页tab选项实现

先看下效果图: 底部tab切换的实现主要在App.json中的 tabBar列表.如下图所示: 接下来详细介绍一下App.json中的参数 1.默认情况下主要分为Pages和window两个模块,tabBar是我们在需要的时候添加进去的 2.pages--我们开发中所写的页面路径都需要引用在这里 3.windows--设置小程序的状态栏.导航条.标题.窗口背景色,详细如下: 4.tabBar 是一个数组,只能配置最少2个.最多5个 tab,tab 按数组的顺序排序.可查看官方API文档tabBa

微信小程序简要学习(二)

小程序的flex布局 view 视图容器. 属性名 类型 默认值 说明 最低版本 hover-class String none 指定按下去的样式类.当 hover-class="none" 时,没有点击态效果   hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态 1.5.0 hover-start-time Number 50 按住后多久出现点击态,单位毫秒   hover-stay-time Number 400 手指

微信小程序(4)--二维码窗口

微信小程序二维码窗口: <view class="btn" bindtap="powerDrawer" data-statu="open">button</view> <!--mask--> <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if=&qu

微信应用号(小程序)开发教程二

更多内容: 开发者专用网址导航:http://www.dev666.com/ 小提示: http://wxopen.notedown.cn/ 这里面复刻了微信小程序的 api 第三章:微信小程序项目结构以及配置 找到创建的 demo 文件夹,把项目导入到你的编辑器,这里使用的是 Sublime Text 编辑器. 这个时候需要根据自己的项目需求结构进行更改了,项目根目录下面是首页渲染的几个 tabBar 页面,以及 app 的一些配置文件,如名片盒项目的 tabBar 是 3 个切换菜单: 我们

微信小程序开发--路由切换,页面重定向

这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1  wx.navigateTo(Object) 功能:保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面.使用 wx.navigateBack 可以返回到当前页面. wx.navigateTo({ //当前页面对应的JS文件内 控制模板 url: 'test?id=1' //需要切换到的页面路劲,此处为