在uni-app中,可以使用uni-app提供的组件和API来创建和管理导航栏、选项卡和菜单等控件。
- 导航栏
可以使用uni-app提供的uni-nav-bar
组件来创建导航栏。该组件提供了title
、background-color
、color
等属性,可以定制导航栏的样式。
示例代码:
<template>
<view>
<uni-nav-bar title="我的页面" :back-text="false"></uni-nav-bar>
</view>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
<style>
</style>
- 选项卡
uni-app提供了uni-tab-bar
和uni-segmented-control
两种选项卡组件,可以根据需要选择使用。
uni-tab-bar
组件类似于底部菜单栏,可以用来切换页面。该组件提供了list
、color
、active-color
等属性来定制选项卡的样式。
示例代码:
<template>
<view>
<uni-tab-bar :list="list" @click="tabClick"></uni-tab-bar>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{
text: "首页",
iconPath: "/static/tab-home.png",
selectedIconPath: "/static/tab-home-active.png"
},
{
text: "分类",
iconPath: "/static/tab-category.png",
selectedIconPath: "/static/tab-category-active.png"
},
{
text: "购物车",
iconPath: "/static/tab-cart.png",
selectedIconPath: "/static/tab-cart-active.png"
},
{
text: "我的",
iconPath: "/static/tab-user.png",
selectedIconPath: "/static/tab-user-active.png"
}
]
};
},
methods: {
tabClick(index) {
console.log(index);
}
}
};
</script>
<style>
</style>
uni-segmented-control
组件类似于顶部的标签页,也可以用来切换页面。该组件提供了values
、active-color
等属性来定制标签页的样式。
示例代码:
<template>
<view>
<uni-segmented-control :values="values" @change="segmentedChange"></uni-segmented-control>
</view>
</template>
<script>
export default {
data() {
return {
values: ["标签1", "标签2", "标签3", "标签4"]
};
},
methods: {
segmentedChange(index) {
console.log(index);
}
}
};
</script>
<style>
</style>
- 菜单
可以使用uni-app提供的uni-popup
组件来创建菜单。该组件可以弹出一个菜单,提供一系列操作选项。
示例代码:
<template>
<view>
<button @click="showPopup">显示菜单</button>
<uni-popup :show="show" @close="closePopup">
<view class="popup-content">
<view @click="doAction(1)">操作1</view>
<view @click="doAction(2)">操作2</view>
<view @click="doAction(3)">操作3</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
show: false
};
},
methods: {
showPopup() {
this.show = true;
},
closePopup() {
this.show = false;
},
doAction(index) {
console.log("执行操作" + index);
this.show = false;
}
}
};
</script>
<style scoped>
.popup-content {
background-color: white;
border-radius: 8px;
padding: 16px;
}
</style>
以上是uni-app中创建和管理导航栏、选项卡和菜单等控件的示例代码,可以根据自己的需要进行定制。