图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作

图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作

什么是tabBar?

顶部或者底部tab栏
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

tabBar的基本属性

tabBar的list属性

tabBar的list属性介绍

参考代码

注意事项

  • list :接受一个数组,只能配置最少 2 个、最多 5 tab。tab 按数组的顺序排序,每个项都是一个对象
  • position:tabBar 的位置,仅支持 bottom / top (下和上,选择上的时候,不显示初始图片路径,不显示选中图片路径)
  • 图片限制:大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
  • borderStyle:tabbar 上边框的颜色, 仅支持 black / white
  • 颜色限制:只支持十六进制颜色

代码笔记

第一步:先在我们的pages中增加我们需要进行切换的页面

第二步:在我们的app.json全局配置文件中增加tabBar栏

注意:我们的图片引用路径以及名称需要正确匹配

第四步:把我上篇所做示例的swiper轮播图的代码,复制到我们的board.wxml首页当中,紧接着,把我们swiper轮播图支持的js文件也复制到我们的board.js当中

原文地址:https://www.cnblogs.com/cainiao-chuanqi/p/11606168.html