uniapp的tabbar跳转网页
时间: 2023-07-31 12:14:05 浏览: 133
uniapp日常总结-uniapp页面跳转方式
在uniapp的tabbar中跳转网页可以通过以下步骤实现:
1. 在pages.json文件中添加一个新的页面,类型为webview。
```
{
"path": "pages/webview/index",
"style": {
"navigationBarTitleText": "网页"
},
"meta": {
"title": "网页"
},
"usingComponents": {
"web-view": "../../static/web-view/web-view"
}
}
```
2. 在tabbar中添加一个新的tab,指向刚才新建的页面。
```
"tabBar": {
"color": "#999",
"selectedColor": "#1AAD19",
"backgroundColor": "#ffffff",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabbar/home.png",
"selectedIconPath": "static/tabbar/home-active.png"
},
{
"pagePath": "pages/webview/index",
"text": "网页",
"iconPath": "static/tabbar/web.png",
"selectedIconPath": "static/tabbar/web-active.png"
}
]
}
```
3. 在webview页面的wxml文件中添加一个web-view组件,并设置src属性为需要跳转的网页地址。
```
<web-view src="https://www.baidu.com"></web-view>
```
4. 运行程序,点击tabbar中的“网页”按钮即可跳转到对应的网页。
阅读全文