uniapp之tabBar/页面切换

╰半夏微凉° 2021-09-13 15:24 5358阅读 0赞

## 1.uniapp目录结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]  
uni.scss 直接在里面编辑全局样式，且无需在每个分页面中引入，只需在style里添加 lang="scss"即可

## 2.tabBar ##

**1.作用（设置页面切换的底部导航栏**）

> 如果应用是一个多 tab应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时  
> 显示的对应页。

**2.属性**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 2]  
**3.list中的属性**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 3]

## 3.设置进入小程序的默认显示页面 ##

只需要将pages.json里的位置颠倒一下即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 4]

## 4.调整底部导航栏位置顺序 ##

颠倒tabBar里list的顺序即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 5]

## 5.uniapp项目实现切换页面 ##

（1）进入uniapp官网，点击左侧列表的tabBar  
![在这里插入图片描述][20200304153816524.png]  
（2）复制列表右侧的tabBar代码粘贴到pages.json

"tabBar": { 
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{ 
            "pagePath": "pages/component/index",
            //"iconPath": "static/image/icon_component.png",
            //"selectedIconPath": "static/image/icon_component_HL.png",
            "text": "组件"
        }, { 
            "pagePath": "pages/API/index",
            //"iconPath": "static/image/icon_API.png",
            //"selectedIconPath": "static/image/icon_API_HL.png",
            "text": "接口"
        }]
    }

将pagePath换成项目的路径（复制pages里path的路径），text换成标题（复制pages里"navigationBarTitleText"的值）  
注：每新建一个页面，pages.json里就会自动添加path，然后手动在style里添加"navigationBarTitleText"

## 6.uniapp项目配置好页面切换后在微信小程序中打开 ##

（1）运行—运行到小程序模拟器—运行设置  
（2）复制微信发开发者路径![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 6]  
（3）进入微信开发者工具  
![在这里插入图片描述][20200304161220998.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 7]  
（4）运行—运行到小程序模拟器—微信开发者工具（开启第一项）  
此时微信开发者工具里就有了uniapp项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 8]  
uniapp项目中就有了一个微信小程序的包  
![在这里插入图片描述][20200305130529716.png]  
注：template标签内要有一个最大的view盒子

## 7.get/post请求 ##

**（1）get请求**

<h1 @click="requestData">发起网络POST请求</h1>
    methods:{ 
    			requestData(){ 
    				uni.request({ 
    				    url: 'http://api.komavideo.com/news/list',
    				    method:'GET',
    					data: { 
    				        
    				    },
    				    header: { 
    				        'custom-header': 'hello' //自定义请求头信息
    				    },
    				    success: (res) => { 
    				        console.log(res.data);
    				    }
    				});
    			}
    		}

**（2）post请求**

<h1 @click="requestData">发起网络POST请求</h1>
    methods:{ 
    			requestData(){ 
    				uni.request({ 
    				    url: 'http://api.komavideo.com/news/list',
    				    method:'POST',
    					data: { 
    				        pageSize:2
    				    },
    				    header: { 
    				        'custom-header': 'hello' //自定义请求头信息
    				    },
    				    success: (res) => { 
    				        console.log(res.data);
    				    }
    				});
    			}
    		}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]: /images/20210913/4f9c49af574e406999ecce0da612b5c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]: /images/20210913/aff78d21e3004aab8a5d6a54014f1477.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 2]: /images/20210913/fcf54eaa51634ea6b42d229a0f77f1ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 3]: /images/20210913/aca89ca0e81640d899208202e6c962fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 4]: /images/20210913/eb7dc3ac3ffe4f6cbaedbec5d8eb9f48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 5]: /images/20210913/d27fc74a7e3346f98002886e061b7267.png
[20200304153816524.png]: /images/20210913/43c6c6b908ab49fd9ca0ba76d9fac602.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 6]: /images/20210913/dc7456133e844224abb52cd301811400.png
[20200304161220998.png]: /images/20210913/1480676865c34910b923b14c893e44da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 7]: /images/20210913/184a75ae34c34774a13a16d937be0250.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 8]: /images/20210913/384b047fb7dd4b678f85cc212e6d4434.png
[20200305130529716.png]: /images/20210913/c8f1f39213eb4126a80947bfabd34c60.png