【项目】UniApp实战多端企业网盘全栈开发 25 下载和上传状态列表【一】

秒速五厘米 2024-03-22 16:01 33阅读 0赞

### 【项目】UniApp实战多端企业网盘全栈开发 ###

#### 文章目录 ####

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  25 下载和上传状态列表【一】

![在这里插入图片描述][00e6026273ee4f57b6a85a0fd72635c4.png_pic_center]

##### 25 下载和上传状态列表【一】 #####

先是导航栏部分，不用它原生的导航栏

这里用到一个图标字体文件

![在这里插入图片描述][b9a49d5ffa8e46bf92e5effc8fd2de7f.png_pic_center]

这是阿里 iconfont下载下来时附带的文件

修改`pages.json`

{
        
    			"path": "pages/list/list",
    			"style": {
        
    				"navigationBarTitleText": "传输列表",
    				"app-plus": {
        
    					"titleNView": {
        
    						"buttons": [{
        
    							"color": "#333333",
    							"colorPressed": "#009CFF",
    							"float": "right",
    							"fontSize": "22px",
    							"fontSrc": "/static/iconfont.ttf",
    							"text": "\ue64a"
    						}]
    					}
    				}
    			}
    
    		},

![在这里插入图片描述][1536203119d24426af3dcafe61698563.png_pic_center]

OK，可以的【当然做首页的时候我们是直接自己做的，因为那里的导航栏比这个复杂】

我们也可以不要这个颜色，换成纯白

![在这里插入图片描述][f0be941db30f46d8a4a2b82f2d7a39fc.png_pic_center]

![在这里插入图片描述][8d2e4b0e160f4209a8859e0745de6daf.png_pic_center]

OK 可以

下面就是修改`list.vue`

<template>
    	<view style="height: 100vh;" class="flex flex-column">
    		<view class="flex border-bottom border-light-secondary" style="height: 100rpx;">
    			<view class="flex-1 flex flex-column align-center justify-center " v-for="(item,index) in tabBars"
    				:key="index" :class="index === tabIndex ? 'text-main' : ''" @click="changeTab(index)">
    				<text class="font-md">{
       {item.name}}</text>
    				<text style="height: 8rpx;width: 30rpx; margin-top: 8rpx;" class="rounded"
    					:class="tabIndex === index ? 'bg-main' : 'bg-white'"></text>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				tabIndex: 0,
    				tabBars: [{
    					name: "下载列表"
    				}, {
    					name: "上传列表"
    				}]
    			}
    		},
    		methods: {
    			changeTab(index) {
    				this.tabIndex = index
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>

效果

![在这里插入图片描述][379a0780726c48c49114e5d65e2f677b.png_pic_center]

点击切换

![在这里插入图片描述][7275c538cd5d4f06aeeba36e64ae63ba.png_pic_center]

没问题。

[00e6026273ee4f57b6a85a0fd72635c4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/32d150f1adc349e8b7f127d54278acde.png
[b9a49d5ffa8e46bf92e5effc8fd2de7f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/383f0e6ebaea4fba9da94d0c564e4ec8.png
[1536203119d24426af3dcafe61698563.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b7b0103ebb574863a19af2b3e36a70e1.png
[f0be941db30f46d8a4a2b82f2d7a39fc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6b127c22ed0e408c877506cd4d0f19ab.png
[8d2e4b0e160f4209a8859e0745de6daf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a61d609dae694cd981986a392fa2c7a0.png
[379a0780726c48c49114e5d65e2f677b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/45460f9a379f4ce1a5d7810c76f0c153.png
[7275c538cd5d4f06aeeba36e64ae63ba.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/2da5706866534489b84cd84bb1997993.png