微信小程序项目实践之主页tab选项实现

2024-02-22 18:51:37

官方文档

效果图：

实现底部Tab选项，只需要在项目根目录下的app.json下修改

如图：

先介绍一下app.json文件

默认有两个代码块：

1、pages

这里注册了当前小程序的所有页面路径

2、window

这里用于设置小程序的状态栏、导航条、标题、窗口背景色。

以上两个详细使用参考文档，本文章不做介绍

我们看下app.json提供的另一个配置项：tabBar

tabBar提供一些公有的属性对tab配置：

　而针对每一个单独的tab 也有一些属性进行配置：

官方示意图：

具体实现底部Tab功能：

设定一个需求，假设当前我们有两个tab,一个'主页'，一个'我的' ，未选中灰黑色，选择红色。

一、在pages目录下创建两个目录，并创建想要的js、json、wxml、wxss相关文件

名字随意，这里举例：home目录（主页Tab相关），mine目录(我的Tab相关)

二、在根目录下新建一个目录，取名images(随意取)，用于存放图片，这里tab需要使用

　　1、在阿里素材库下载几个，注意tab图片需要下载点击和未点击两种状态下的图片。

2、讲图片资源复制到自己建的用于存图片的目录下

三、app.json文件配置

1、在pages属性中配置项目所有的页面路径，我们这个例子就两个，home,mine

"pages":[
  "pages/home/home",
  "pages/mine/mine"
 ]

　 2、添加tabBar 属性，定义一些状态

根据文章前面部分讲解，进行一些必要属性的配置

"tabBar":{
  "color": "#333333",
  "selectedColor": "#ff0000",
  "backgroundColor": "#fff",
  "list":[
   {
    "pagePath":"pages/home/home",
    "text":"主页",
    "iconPath":"images/home.png",
    "selectedIconPath":"images/home_selected.png"

   },
   {
    "pagePath":"pages/mine/mine",
    "text":"我的",
    "iconPath": "images/mine.png",
    "selectedIconPath":"images/mine_selected.png"
   }
  ]
 }

{
 "pages":[
 "pages/home/home",
 "pages/mine/mine"
 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle":"black"
 },
 "tabBar":{
 "color": "#333333",
 "selectedColor": "#ff0000",
 "backgroundColor": "#fff",
 "list":[
  {
  "pagePath":"pages/home/home",
  "text":"主页",
  "iconPath":"images/home.png",
  "selectedIconPath":"images/home_selected.png"
  },
  {
  "pagePath":"pages/mine/mine",
  "text":"我的",
  "iconPath": "images/mine.png",
  "selectedIconPath":"images/mine_selected.png"
  }
 ]
 }
}

四、单独页面的配置

　　一个页面包含js、hson、wxml、wxss等相关文件。

这里不再多具体介绍，只添加一个小需求，点击tab切换相关页面，该页面标题要和tab一致，页面内容也和tab一致，用于说明tab效果正确实现。

1、设置单独页面的页面标题，这个需求是在json文件中配置实现的。

　　　主需要在单独页面路径下的json文件中添加属性：

　　　　官方文档

2、在页面中显示与tab一致的文字

　　页面内容搭建（ui绘制代码）是在单独页面路径下的wxml文件中配置实现的。

　　　　官方文档

总结

以上所述是小编给大家介绍的微信小程序项目实践之主页tab选项实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

微信小程序 tabs选项卡效果的实现

微信小程序 tabs选项卡效果前言: 最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三
微信小程序开发之选项卡(窗口底部TabBar)页面切换

微信小程序开发中窗口底部tab栏切换页面很简单很方便. 代码: 1.app.json //app.json { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": &qu
微信小程序实现tabs选项卡效果实例代码

最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三目运算通过点击获取导航索引,根据索引判断
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml  <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"
微信小程序自定义组件实现tabs选项卡功能

本文为大家分享了微信小程序实现tabs选项卡功能的具体代码,供大家参考,具体内容如下一个自定义组件由 json wxml wxss js 4个文件组成.要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为自定义组件) components/navigator/index.json { "component": true } components/navigator/index.wxml <!-- 自定
微信小程序项目实践之主页tab选项实现

官方文档效果图: 实现底部Tab选项,只需要在项目根目录下的app.json下修改如图: 先介绍一下app.json文件默认有两个代码块: 1.pages 这里注册了当前小程序的所有页面路径 2.window 这里用于设置小程序的状态栏.导航条.标题.窗口背景色. 以上两个详细使用参考文档,本文章不做介绍我们看下app.json提供的另一个配置项:tabBar tabBar提供一些公有的属性对tab配置: 而针对每一个单独的tab 也有一些属性进行配置: 官方示意图: 具体实现底部Tab
微信小程序项目实践之九宫格实现及item跳转功能

效果图: 实现效果图红色线包含部分的九宫格效果,并附带item点击时间. 具体实现: 1.首先添加图片资源文件在项目根目录新建一个目录,取名为images , 用于存放图片资源,然后添加进入几张图片 2.在home目录下的home.js 文件中(参照前两篇小程序实践文章) 进行数据源的配置数据源为一个数组,每个数组元素为一个对象,该对象包含name(item文字),img(item示意图),url(点击该item跳转目录) 3.依据列表渲染的知识点进行home.wxml的编程
微信小程序项目实践之验证码倒计时功能

效果如下:点击发送验证码按钮,按钮背景变色,不可点击,显示倒计时文字首先js文件的data里面声明一个变量用于表示当前是否可以点击,codeIsCanClick = true, 默认是可以点击的写下界面代码: wxml文件中 <view class='centerRow'> <view class='inputLabel'>动态码:</view> <input class='inputStyle' style="flex:1 " bin
基于mpvue搭建微信小程序项目框架的教程详解

简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序开发前言: 本文讲述如何搭建完整的小程序项目框架,因为是第一次使用,有不完善的地方请大佬指正. 搭建内容包括: 1.使用scss语法:依赖插件sass-loader .node-sass 2.像vue一样使用路由:依赖插件 mpvue-entry 和 mpvue-router-patch 3.使用
微信小程序项目总结之记账小程序功能的实现（包括后端）

一.小程序部分这是理财系统的前端,江苏海洋大学微信小程序比赛,最后获得了一等奖 GitHub:https://github.com/GeorgeLeoo/finance 1. 项目描述 (1). 此项目为记账小程序 (2). 包括账单.图表.搜索.用户等多个子模块 (3). 使用微信小程序技术 (4). 采用模块化.组件化.工程化等模式开发 2. 项目功能界面在 1.0.2版本中删除了扇形图 3. 项目目录 * pages:页面 * components:组件 * utils:工具类 |--
微信小程序项目总结之点赞删除列表分享功能

小程序点赞功能思路:在后台没有给你接口自己模拟数据 data:{ likes:{ iszan:false, num:0 } } 1.遍历评论列表判断点击的id 2.如果id相同判断是否点赞过如果为true -1 如果为false +1 3.更新数据 bindlike:function(e){ var newData = this.data.release.map(function(item){ if (item.id == e.currentTarget.dataset.id){ con
解决微信小程序防止无法回到主页的问题

[小程序]提交订单页面到订单详情页面,如何防止无法回到主页问题场景: 小程序某个页面完成后,希望跳转到另一个相关页面. 比如,订单提交完成后,希望跳转到订单详情页面,可选的方案有两个 A 使用 wx.navigateTo 跳转到非 tabBar 页面优点是有返回按钮,可以一步一步的返回到主页缺点是用户体验很差,还有可能重复发布订单 B使用 wx.redirectTo跳转到非 tabBar 页面优点是,不会返回旧页面缺点是,无法返回主页,造成死循环解决办法 1.使用 wx.reLaun
taro开发微信小程序的实践

在京东凹凸实验室开发Taro跨平台早期之前,就已经进行Taro尝鲜了.开发这个实例猫眼电影已经过去几个月了.案例部分使用的是猫眼电影真实线上接口,关于订座的座位数据是自己模拟实现的,案例只供参考学习. 开发环境操作系统:Window 10 Taro版本:v0.0.69 Node版本:v8.11.1 github地址: https://github.com/Harhao/miniProgram 运行效果目录分析 src 是主要的开发目录,各个文件实现功能如下所示: ├─.idea │ └─
微信小程序自定义可滑动的tab切换

本文实例为大家分享了微信小程序自定义tab切换(可滑动),供大家参考,具体内容如下自定义tab切换(可滑动)  <view class="menu"> <navigator wx:for="{{shouye}}" wx:key="index" bindtap="change" class="{{page==index?
微信小程序顶部导航栏滑动tab效果

小程序商品展示需要导航栏的商品分类进行滑动,供大家参考,具体内容如下效果图: 首先是滑动的效果: <scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;"> </scroll-view> 小程序使用</scroll-view>,横向移动即可 WXML:这里面我将导航栏显示类目定义为5个,每个20%,当超出5个分类,也就是index>4的时候,导

微信小程序项目实践之主页tab选项实现

相关推荐

随机推荐