【项目】UniApp实战多端企业网盘全栈开发 24 文件排序弹窗

比眉伴天荒 2024-03-22 16:00 77阅读 0赞

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

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

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  24 文件排序弹窗

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

##### 24 文件排序弹窗 #####

当然这里只是实现样式，真正的排序是在后端实现的。

<uni-popup ref="sort" type="bottom">
    			<view class="bg-white">
    				<view class="flex align-center justify-center py-2 text-main font" hover-class="bg-light">
    					按名称排序
    				</view>
    				<view class="flex align-center justify-center py-2 text-main font" hover-class="bg-light">
    					按时间排序
    				</view>
    			</view>
    		</uni-popup>

点击事件处理

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

实现这个事件

openSortDialog() {
        
    				this.$refs.sort.open()
    			},

看看效果

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

真机效果

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

没问题

再改一下，把这两个东西写成一个数组

sortIndex: 0,
    				sortOptions: [{
        
    					name: "按名称排序",
    				}, {
        
    					name: "按时间排序",
    				}],

<uni-popup ref="sort" type="bottom">
    			<view class="bg-white">
    				<view v-for="(item,index) in sortOptions" :key="index"
    					class="flex align-center justify-center py-3 font border-bottom border-light-secondary"
    					:class="index === sortIndex ? 'text-main' : 'text-dark'" hover-class="bg-light"
    					@click="changeSort(index)">
    					{
       {item.name}}
    				</view>
    			</view>
    		</uni-popup>

实现点击事件

// 切换排序
    			changeSort(index) {
        
    				this.sortIndex = index
    				this.$refs.sort.close()
    			},

看看效果

![在这里插入图片描述][128418ca6aa34c2a999c666be1722eef.gif_pic_center]

没问题。当然在浏览器里面会把tabbar 遮住，真机不会。

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

[cc84ab43ca114823833fef2bd0b13fd9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/593e88b9defb41cdb6179d145e285b75.png
[1727e226500c4fc2bf7165b4824a182a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/df965acf04a447bb929a1100d44a82b0.png
[cd6c805509144c8e8b63fda6f847ae96.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/09ed6d12fdd24fb099a759b9677f3e5e.png
[58b42b8deac4477abffe1e65d36dc04f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f3f9e5547ef544c79f52630fe1e63219.png
[128418ca6aa34c2a999c666be1722eef.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/cd30d6b3fa974f20b4dceb3a316a5ee0.png
[9f441c31c9504bd1949efc8f9fbe00d1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/72b42574357b4da6bd665f8814241381.png