uniapp中模块之间加横线
时间: 2023-07-30 07:06:18 浏览: 135
如果你想在uniapp中实现模块之间加横线的效果,可以使用uni-app提供的组件`uni-icons`和`uni-badge`来实现。具体步骤如下:
1. 在需要加横线的模块中添加一个`uni-icons`组件,用来显示横线图标。可以选择自己喜欢的图标,比如`uni-icons`组件中提供的`uni-minus`图标。
2. 在需要加横线的模块中添加一个`uni-badge`组件,用来显示横线。将`uni-icons`组件放在`uni-badge`组件中,并设置`uni-badge`组件的样式为`primary`,这样就可以实现横线的效果了。
以下是示例代码:
```
<template>
<view>
<view class="module">
<text>模块1</text>
</view>
<view class="line">
<uni-badge class="line-badge" type="primary">
<uni-icons class="line-icon" type="uni-minus"></uni-icons>
</uni-badge>
</view>
<view class="module">
<text>模块2</text>
</view>
</view>
</template>
<style>
.line {
display: flex;
align-items: center;
justify-content: center;
margin: 20rpx 0;
}
.line-badge {
width: 100%;
height: 2rpx;
margin: 0;
padding: 0;
}
.line-icon {
font-size: 30rpx;
}
.module {
height: 100rpx;
background-color: #fff;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: center;
}
</style>
```
以上代码中,我们在模块1和模块2之间添加了一个横线,实现了模块之间的区分效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)