微信小程序 添加左边固定浮动框
2024-08-25 06:25:41
view:
<!-- 悬浮框 -->
<view class="v-fixed-title1">
<view class="v-fixed-ic">
<uni-icons size="6" class="v-fixed-icon" type="chatbubble" color="#ffffff">
</uni-icons> <uni-icons size="3" class="v-fixed-icon" type="closeempty" color="#ffffff">
</uni-icons>
</view>
<view class="v-fixed-text">参会人</view>
</view>
<view class="v-fixed-title2">
<view class="v-fixed-ic">
<uni-icons size="6" class="v-fixed-icon" type="compose" color="#ffffff">
</uni-icons>
<uni-icons size="3" class="v-fixed-icon" type="closeempty" color="#ffffff">
</uni-icons>
</view>
<view class="v-fixed-text">签 到</view>
</view>
css:
.v-fixed-title1 {
position: fixed;
top: 30%;
left: 15rpx;
width: 130rpx;
border-radius: 15rpx;
display: flex;
flex-direction: column;
background-color: #8B3E2F;
padding-left: 15rpx;
} .v-fixed-title2 {
position: fixed;
top: 43%;
left: 15rpx;
display: flex;
padding-left: 15rpx;
border-radius: 15rpx;
width: 130rpx;
/*设置容器内部容器的排列方向*/
flex-direction: column;
background-color: #8B3E2F;
} .v-fixed-ic {
display: flex;
flex-direction: row;
} .v-fixed-text {
font-size: 28rpx;
color: #FFFFFF;
}
效果:
最新文章
- JS传参中文乱码
- 从零开始学Python04作业思路:模拟ATM电子银行
- js关于函数调用
- Why one-norm is an agreeable alternative for zero-norm?
- linux系统io的copy
- Oracle 包(Package)
- POJ-1273 Drainage Ditches 最大流Dinic
- NAT学习笔记
- String.Format格式说明(转)
- struts2的@Result annotation 如何添加params
- CAS Tomcat实现单点登录
- 逗号分隔字符串转换为一张表--解决查询in(逗号分隔字符串)出错问题
- clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y ,offsetTop,offsetLeft 详解
- POJ2063 Investment 【全然背包】
- PHP新手必须掌握的入门与实战技巧
- hdu 1072 广搜
- 20165230 2017-2018-2 《Java程序设计》第3周学习总结
- ubuntu 16.04 主题美化及终端美化
- 2 第一个Django应用 第1部分(数据库与模型)
- poj3114 Contries in War (tarjan+dijkstra)