炫意html5
最早CSS3和HTML5移动技术网站之一

小程序 自定义导航

自定义顶部导航

上一章节我们使用 window 设置小程序的导航条、标题、窗口背景色。
想要自定义某个页面的顶部导航栏,我们只需要在对应的页面的json文件里添加参数 “navigationStyle”: “custom” 设置即可:
//order.json
{
"usingComponents": {},
"navigationStyle": "custom"
}

然后我们在order.wxml下定义我们的导航结构:
//order.wxml
<view>
<view>订单</view>
</view>
<view>我是订单页面</view>

最后我们在order.wxss下编写我们的导航结构样式:
//order.wxss
.order-nav{
width: 100%;
height: 64px;
text-align: center;
color: #fff;
background: #45A844;
box-sizing: border-box;
}
.order-nav view{
padding-top:20px;
line-height: 44px;
}

基于iPhone6尺寸在真机渲染导航高度是电量条20px+导航条40px=64px
编译结果如下:
导航

自定义底部导航

自定义 tabBar 导航需要在app.json文件里添加参数 “custom”: true 设置即可开启:
//app.json
"tabBar": {
"color": "#333",  //文字颜色
"custom": true,  //开启自定义 tabBar
"selectedColor": "#45A844",  //选中文字颜色
"backgroundColor": "#ffffff", //导航背景色
"borderStyle": "white", //tabbar 上边框的颜色,仅支持 black / white
"list": [
{
"pagePath": "pages/index/index",  //对应的页面
"iconPath": "images/shouye_default.png",  //默认的图标
"selectedIconPath": "images/shouye.png",  //选中高亮的图标
"text": "首页"
},
{
"pagePath": "pages/order/order",
"iconPath": "images/dingdan.png",
"selectedIconPath": "images/dingdan_check.png",
"text": "订单"
},
{
"pagePath": "pages/user/user",
"iconPath": "images/wode.png",
"selectedIconPath": "images/wode_check.png",
"text": "我的"
}
]
}

然后我们新建一个文件命名为 custom-tab-bar
在代码根目录下添加入口文件:
  • custom-tab-bar/index.js
  • custom-tab-bar/index.json
  • custom-tab-bar/index.wxml
  • custom-tab-bar/index.wxss
用自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增 getTabBar 接口,可获取当前页面下的自定义 tabBar 组件实例。
custom-tab-bar/index.wxml 代码如下:
//index.wxml
<cover-view>
<cover-view></cover-view>
<cover-view wx:for="{{list}}" wx:key="index" bindtap="switchTab">
<cover-image src="https://www.jc2182.com/xiaochengxu/{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view>{{item.text}}</cover-view>
</cover-view>
</cover-view>

custom-tab-bar/index.wxss 代码如下:
//index.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: 44rpx;
height: 44rpx;
}
.tab-bar-item cover-view {
font-size: 10px;
}

custom-tab-bar/index.js 代码如下:
//index.js
Component({
data: {
selected: 0,
custom: true,
color: "#333",
selectedColor: "#45A844",
"list": [
{
"pagePath": "/pages/index/index",
"iconPath": "/images/shouye_default.png",
"selectedIconPath": "/images/shouye.png",
"text": "首页"
},
{
"pagePath": "/pages/order/order",
"iconPath": "/images/dingdan.png",
"selectedIconPath": "/images/dingdan_check.png",
"text": "订单"
},
{
"pagePath": "/pages/user/user",
"iconPath": "/images/wode.png",
"selectedIconPath": "/images/wode_check.png",
"text": "我的"
}
]
},
attached() {
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({ url })
this.setData({
selected: data.index
})
}
}
})

注意:Path的路径前面要多加 “/”
最后需要在tabBar对应的页面获取对应选中状态的值
pages/index/index.js 首页 selected: 0 代码如下:
//index.js
Page({
data: {
},
onLoad: function (options) {
},
onShow(){
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}
})

pages/order/order.js 订单 selected: 1 代码如下:
//order.js
Page({
data: {
},
onLoad: function (options) {
},
onShow(){
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 1
})
}
}
})

pages/user/user.js 订单 selected: 2 代码如下:
//user.js
Page({
data: {
},
onLoad: function (options) {
},
onShow(){
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 2
})
}
}
})

编译结果如下:
底部导航

炫意HTML5 » 小程序 自定义导航

Java基础教程Android基础教程