uniapp 中下拉菜单 点击内容 跳转对应页面 页面 代码
时间: 2023-08-24 13:04:05 浏览: 131
好的,下面是一个简单的示例代码,实现了在 uniapp 中点击下拉菜单选项跳转到对应页面的功能。
1. 在页面中使用 picker 组件创建下拉菜单,代码如下:
```
<template>
<view>
<picker mode="selector" :range="menuList" @change="onSelectMenuItem">
<view class="picker">
{{ menuList[currentIndex].text }}
<text class="iconfont icon-arrowdown"></text>
</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
menuList: [
{text: '首页', url: '/pages/home/index'},
{text: '新闻', url: '/pages/news/index'},
{text: '关于', url: '/pages/about/index'}
],
currentIndex: 0
}
},
methods: {
onSelectMenuItem(event) {
const index = event.detail.value
this.currentIndex = index
uni.navigateTo({
url: this.menuList[index].url
})
}
}
}
</script>
<style>
.picker {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx;
font-size: 28rpx;
color: #333;
background-color: #f5f5f5;
border-bottom: 1rpx solid #ddd;
}
.iconfont {
font-size: 24rpx;
}
</style>
```
2. 在 pages.json 文件中配置对应页面的路径和名称,代码如下:
```
{
"pages": [
{
"path": "pages/home/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/news/index",
"style": {
"navigationBarTitleText": "新闻"
}
},
{
"path": "pages/about/index",
"style": {
"navigationBarTitleText": "关于"
}
}
]
}
```
这样,当用户在下拉菜单中选择某个选项时,就会跳转到对应的页面。需要注意的是,这里只是一个简单的示例代码,实际应用中需要根据具体需求进行修改和完善。
阅读全文