zoukankan      html  css  js  c++  java
  • 图解微信小程序---添加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当中

  • 相关阅读:
    day4
    cache用法
    Excel批量生成SQL语句,处理大量数据(增,改)
    IDEA中Maven依赖下载失败解决方案
    IDEA 自动生成类图 UML
    springboot报错说 Failed to parse multipart servlet request; nested exception is java.io.IOException
    controller层的引用service层一直报空指针问题
    CONCATENATE函数
    AQS
    String 类和常量池
  • 原文地址:https://www.cnblogs.com/cainiao-chuanqi/p/11606168.html
Copyright © 2011-2022 走看看