一.先在package.json中配置tabBar（前置條件）

tabBar所跳轉(zhuǎn)的頁(yè)面應(yīng)事先在page中創(chuàng)建好！如下配置后app下方會(huì)有可點(diǎn)擊的tabBar按鈕，在list中設(shè)置按鈕的個(gè)數(shù)。

?圖1

? ? ? ? tabBar的list屬性

? ? ? ? text：tabBar按鈕的名稱

? ? ? ? pagePath：tabBar按鈕的page頁(yè)面路徑

? ? ? ? iconPath：未選中時(shí)的按鈕圖片

? ? ? ? selectedIconPath：選中時(shí)的按鈕圖片

? ? ? ? visible：默認(rèn)開(kāi)啟和關(guān)閉某個(gè)tabBar按鈕

? ? ? ? iconfont：tabBar底部的字體顯示

?圖2

二.tabBar的點(diǎn)擊事件

1.tabBar的刷新事件

（1）點(diǎn)擊tabBar自動(dòng)刷新頁(yè)面???onTabItemTap(e)

<template>
? <div>
? ? <web-view :src="url" ref="webView"></web-view>
? </div>
</template>

<script>
export default {
? data() {
? ? return {
? ? ? url: 'https://www.baidu.com', // 外部網(wǎng)頁(yè)的URL
? ? };
? },
? methods: {

? ? //點(diǎn)擊tabBar自動(dòng)刷新頁(yè)面
? ? onTabItemTap(e) {
? ? ? this.url = '';
? ? ? // 異步重新設(shè)置 src，相當(dāng)于刷新 web-view
? ? ? setTimeout(() => {
? ? ? ? this.url = 'https://www.baidu.com';
? ? ? }, 100);
? ? },
? },
};
</script>

2.給點(diǎn)擊頁(yè)面的時(shí)候增加一個(gè)loading加載框

<template>
? <div>
? ? <web-view :src="url" ref="webView"></web-view>
? </div>
</template>

<script>
export default {
? data() {
? ? return {
? ? ? url: 'https://www.baidu.com', // 外部網(wǎng)頁(yè)的URL
? ? };
? },
? methods: {

? ? //點(diǎn)擊tabBar自動(dòng)刷新頁(yè)面
? ? onTabItemTap(e) {
? ? ? this.url = '';
? ? ? // 異步重新設(shè)置 src，相當(dāng)于刷新 web-view
? ? ? setTimeout(() => {
? ? ? ? this.url = 'https://www.baidu.com';
? ? ? }, 100);
? ? },
? },
? mounted() {
? ? this.refreshWebView();
? },

? //給點(diǎn)擊tabBar時(shí)加一個(gè)1s的loading加載框
? watch: {
? ? url(newUrl) {
? ? ? if (newUrl === '') {
? ? ? ? uni.showToast({
? ? ? ? ? title: '加載中',
? ? ? ? ? icon: 'loading',
? ? ? ? ? duration: 1000,
? ? ? ? });
? ? ? }
? ? },
? },
? created() {
? ? uni.hideToast();
? },
? beforeDestroy() {
? ? uni.hideToast();
? },
? destroyed() {
? ? uni.hideToast();
? },
};
</script>文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-716647.html

到了這里，關(guān)于uni-app的tabBar用法(自動(dòng)、點(diǎn)擊刷新頁(yè)面，loading加載框)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！