标签：cti 数据 没有 XML 处理 nbsp padding 信息 rgb
小程序中默认设置了tabbar组件，但是有时候需要我们自定义的tabbar组件去完成更多的功能，例如绑定一些自定义的属性和方法。
自定义tabbar也就是使用我们定义的组件去替换系统默认的tabbar。
tabbar是一个组件，同时它和平常使用view，text组件是一样的，通过在前端页面中使用该标签，就能展示出对应的样式。自定义组件的第一步就是定义好这个组件的样子
创建一个组件文件夹，写入样式 wxml，wxss以及js内容，为了方便管理多个自定义的组件，使用这样的文件目录
components/ tabbar/ tabbar.js tabbar.wxml tabbar.json tabbar.wxss 组件2/ 组件3/
tabbar.wxml
<cover-view class="tab-bar"> <cover-view class="tab-bar-border"></cover-view> <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"> <block wx:if="{{item.pagePath}}"><cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image> <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view> </block> <block wx:else> <cover-view class="publish" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view> </block> </cover-view> </cover-view>
tabbar.js
Component({ /* 该组件可以拥有的属性，例如默认有class，id等属性，这里定义一个selected属性。在不同的页面使用时候，指定该不同的值即可实现不同的选中状态 <tabbar selected={{1}} ></tabbar>*/ properties: { selected: { type: Number, value: 0 } }, /* 组件的初始数据 */ data: { // 该data 中的数据 color: "#7A7E83", selectedColor: "#b4282d", list: [{ "pagePath": "/pages/index/index", "text": "首页", "iconPath": "/static/images/tabbar/ic_menu_choice_nor.png", "selectedIconPath": "/static/images/tabbar/ic_menu_choice_pressed.png" }, { "text": "发布" }, { "pagePath": "/pages/home/home", "text": "我的", "iconPath": "/static/images/tabbar/ic_menu_me_nor.png", "selectedIconPath": "/static/images/tabbar/ic_menu_me_pressed.png" } ] }, /** 组件的方法列表，该组件上定义的事件函数都会触发这个列表中的方法 */ methods: { switchTab(e) { if (userinfo) {wx.switchTab({ url })} else { } } } })
由于一个tabbar会有多个标签，这个在data中定义这些按钮的一个列表，保存各个按钮的属性值
可以通过在tabbar的的标签上绑定方法，这样点击标签一个标签时候将会执行这个对应的事件函数，而这些事件函数都在methods中定义了， 例如上述switchTab方法，在点击一个标签时候触发
tabbar.wxss
.tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 48px; background: white; display: flex; padding-bottom: env(safe-area-inset-bottom); } .tab-bar-border { background-color: rgba(0, 0, 0, 0.33); position: absolute; left: 0; top: 0; width: 100%; height: 1px; transform: scaleY(0.5); } .tab-bar-item { flex: 1; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; } .tab-bar-item cover-image { width: 27px; height: 27px; } .tab-bar-item cover-view { font-size: 10px; } .publish{ width: 80rpx; height: 80rpx; display: flex; justify-content: center; align-items: center; font-size: 26rpx !important; background-color:aquamarine; border-radius: 50%; }
由于我们本次定义的是一个tabbar组件，当我们开启该功能后，系统会自动为我们创建一个tabbar并显示，在使用自定义的tabbar之前，需要禁用这个默认的tabbar。在app.json文件中将tabbar中设置 "custom": true,
{ "pages": [ "pages/index/index", // index页面路径 ], "window": { // 顶部 "backgroundTextStyle": "dark", "navigationBarTitleText": "标题", "enablePullDownRefresh": true }, "tabBar": { // tabbar "custom": true, // 设置为true, 禁用了默认的选项 "backgroundColor": "#fafafa", "borderStyle": "white", "color": "#666", "selectedColor": "#b4282d", "position": "bottom", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/images/tabbar/ic_menu_choice_nor.png", "selectedIconPath": "static/images/tabbar/ic_menu_choice_pressed.png" }, { "pagePath": "pages/message/message", "text": "消息", "iconPath": "static/images/tabbar/ic_menu_shopping_nor.png", "selectedIconPath": "static/images/tabbar/ic_menu_shopping_pressed.png" }, { "pagePath": "pages/home/home", "text": "我的", "iconPath": "static/images/tabbar/ic_menu_me_nor.png", "selectedIconPath": "static/images/tabbar/ic_menu_me_pressed.png" } ] }, "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } }, "debug": true, "sitemapLocation": "sitemap.json" }
上面的操作只是定义了一个组件，而这个组件我们并没有去使用它，使用它的方式和标签的使用方式是相同的，例如将其命名为tb，在页面中<tb></tb>即使用。
当一个页面中需要使用该组件，就需要提前导入，并为其标签命名，然后使用即可
index.json
// 导入到页面 { "usingComponents": { // 自定义组件列表 "tabbar":"/components/tabbar/tabbar" // wxml使用时的组件名：组件路径 }, }
// index.wxml // 在页面中使用/////////////// <tabbar selected={{1}}> </tabbar> // selected 自定义的一个属性
在index这个页面中导入了 tabbar组件，并名为tabbar，这样在前端中使用 <tabbar> </tabbar> 即可
1. 创建compoment，定义一个组件的样式和逻辑处理信息，包括properties 和 methods信息。
2. 在app.json中开启tabbar，但是设置custom为true，标识使用自定义tabbar。
3. 在页面的json文件中导入这个组件，并命名，然后即可在wxml页面中使用。
标签：cti 数据 没有 XML 处理 nbsp padding 信息 rgb
原文地址：https://www.cnblogs.com/k5210202/p/13218484.html
