# uniapp-components

**Repository Path**: 1024335892/uniapp-components

## Basic Information

- **Project Name**: uniapp-components
- **Description**: vue3的组件整理(vue2和vue3)
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-01-25
- **Last Updated**: 2024-11-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 插件的列表

- ayi-skeleton 骨架屏
- countdown倒计时组件
- virtualList_use真实可以的虚拟dom的长列表优化
- tab_scroll是tab定位到内容，内容滚动定位tab
- tab_swiper是tab和swiper的相关定位
- more_line_hide多行折叠和展开的处理(应用场景标题的展示)
- recycleview固定高度的长列表(虚拟dom)滚动优化
- diablo_mode_test暗黑模式的参考
- more-line多行折叠显示处理
- activity-share活动分享的海报
- swiper_banner+顶部导航(uniapp+uview1.x)
- H5Scan是H5的扫码功能实现方式(参考，按实际进行操作)

> scss处理安全距离

## scss的处理

scss

```
@each $d in top, right, bottom, left {
	.safe-area-inset-#{$d} {
		padding-#{$d}: 0;
		padding-#{$d}: constant(safe-area-inset-#{$d});  
		padding-#{$d}: env(safe-area-inset-#{$d});  
	}
}
```

编译后的显示

```
.safe-area-inset-top { padding-top: 0; padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); }
.safe-area-inset-right { padding-right: 0; padding-right: constant(safe-area-inset-right); padding-right: env(safe-area-inset-right); }
.safe-area-inset-bottom { padding-bottom: 0; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }
.safe-area-inset-left { padding-left: 0; padding-left: constant(safe-area-inset-left); padding-left: env(safe-area-inset-left); }

```

## 使用

```
<!--底部的安全距离-->
<view style="width:100%" class="safe-area-inset-bottom"></view>
```