微信小程序 - 自定义tabbar(组件)
配置项(关于使用组件)
index.wxml
<!--
tabBar:tabBar配置
activeIndex: 激活页面下标
slots: 多插槽配置(需与页面一致)
--> <tabbar data="{{tabBar}}" activeIndex="0" solts="{{solts}}">
<view slot="index">index1...</view>
<view slot="other">other2...</view>
<view slot="my">my3....</view>
<view slot="hello">hello...4</view>
<view slot="bat">bat...5</view>
</tabbar>
index.js(data)
tabBar: {
"selectedColor": "#5DBCFF",
"normalColor": "#333",
"backgroundColor": "#fff",
"selectedBackgroundColor": "#fff",
"list": [{
"pagePath": "market/index/index",
"iconPath": "images/icon_home.png",
"selectedIconPath": "images/icon_home_selected.png",
"text": "首页"
}, {
"pagePath": "tools/index/index",
"iconPath": "images/icon_cate.png",
"selectedIconPath": "images/icon_cate_selected.png",
"text": "分类"
}, {
"pagePath": "viewing/index/index",
"iconPath": "images/icon_member.png",
"selectedIconPath": "images/icon_member_selected.png",
"text": "我"
}, {
"pagePath": "viewing/index/index",
"iconPath": "images/icon_member.png",
"selectedIconPath": "images/icon_member_selected.png",
"text": "Hello"
}, {
"pagePath": "viewing/index/index",
"iconPath": "images/icon_member.png",
"selectedIconPath": "images/icon_member_selected.png",
"text": "Bat"
}]
},
solts: [{
name: 'index'
}, {
name: 'other'
}, {
name: 'my'
}, {
name: 'hello'
}, {
name: 'bat'
}]
示例:点击下载
微信小程序 - 自定义tabbar(组件)的更多相关文章
- 微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
- 微信小程序自定义tabbar的实现
微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...
- 微信小程序自定义音频组件,自定义滚动条,单曲循环,循环播放
小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...
- 微信小程序 自定义导航组件 nav头部 全面屏设计
nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...
- 微信小程序 - 自定义tabbar
更新: 2019-1-18:自定义tabbar组件已发布 各种奇葩的需求,造就了我们 wxml <view class="nav-tabs"> <view cla ...
- 微信小程序 自定义tabbar实例
在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 t ...
- 微信小程序自定义TabBar
项目中需要根据用户角色控制TabBar中各Item的显示和隐藏,然而小程序自带TabBar没有提供隐藏某个item的功能,只好自己动手写了一个. 1.wxml文件 <view class=&qu ...
- 微信小程序——自定义图标组件
字体图标在网页中非常常见了.为了方便在小程序里面重复使用,自定义了一个图标组件,方便控制它的大小,颜色,自定义点击事件. 自定义图标组件的代码如下: 下面的代码是icon文件夹下面的4个文件 inde ...
- 微信小程序自定义tabbar的问题
个人感觉小程序的tab样式自定义的能力有所欠缺,不够美观,于是今天自己diy了一个tab 测试的时候发现,无论是使用navigator跳转(会出现点击的效果)还是用bindtap(触摸),因为没有定义 ...
随机推荐
- utf-8与utf-8(无BOM)的区别
BOM——Byte Order Mark,就是字节序标记 在UCS 编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符,它的编码是FEFF.而FFFE ...
- mysql 筛选重复项(单列或者多列同时重复)
原文:https://blog.csdn.net/luyaran/article/details/80929026 -------------单列----------------------- SEL ...
- SharePoint PowerShell 批量删除遗弃视图
前言 最近,给SharePoint升级了,然后发现,有一大批视图不需要了,而且,名字是一样的,想着怎么清理,然后,就想到了powershell. powershell 示例: $siteUrl = & ...
- SharePoint 内容编辑器部件介绍
前言 在SharePoint的使用过程中,我们经常会往页面中插入一些东西,这时候很可能就需要内容编辑器部件了.比如:插HTML.插样式.插脚本.插图片,统统都拿来,用内容编辑器部件. 正文 使用内容编 ...
- 罪恶黑名单第四季/全集The Blacklist迅雷下载
英文全名The Blacklist,第1季(2016)NBC.本季看点:<罪恶黑名单>我们知道:剧情紧接第三季结尾,每个人——Liz,Red以及特别行动组的其他人——似乎都有许多故事可说: ...
- App.config和Web.config配置文件的配置节点的解析
前言 在http://www.cnblogs.com/aehyok/p/3558661.html这篇博文中,大致对配置文件有了初步的了解,并且在文中有提到过<appSettings>和&l ...
- win7下设置环境变量
手工当然可以进行环境变量的设置,但是如果一个小组有需要设置固定环境变量的操作,这可能就会有点麻烦了,xp下设置环境变量比较简单,直接用set,win7下需要使用setx SETX XX_HOME &q ...
- SQLite中的增删改查
虽然android提供了sql查询的封装方法,但是理解起来还是麻烦,所以我这里用sql语句来完成工作. 首先是建立一个类,继承SQLiteOpenHelper 这里面会建立一个数据库,并且初始化一个表 ...
- 利用Microsoft.Exchange.WebServices处理Office365邮件的几个属性
使用Microsoft.Exchange.WebServices可以很方便操作Office365邮件.这里列出几个重要的属性. 通常,代码里会先定义一个WebServices对象 ExchangeSe ...
- python的rsa公钥解密方法
示例: # -*- coding: UTF- -*- import M2Crypto import base64 #私钥加密,公钥解密 def pri_encrypt(msg, file_name): ...