微信小程序 添加左边固定浮动框
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;
}
效果:

微信小程序 添加左边固定浮动框的更多相关文章
- 微信小程序添加悬浮在线客服会话按钮
微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用.客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会 ...
- 图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作
图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...
- 微信小程序添加外部地图服务数据
先上效果: 缘起 使用微信小程序做地图相关功能的时候,有个需求是需要接入自己发布的地图服务.查看微信小程序地图组件文档,发现它对地图相关的支持很少,只有一些基础功能,比如添加点.线.面.气泡和一些常规 ...
- 微信小程序自定义组件-下拉框
这个是网址https://www.cnblogs.com/zjjDaily/p/9548433.html 微信小程序之自定义select下拉选项框组件 知识点:组件,animation,获取当前点击元 ...
- 微信小程序添加卡券到微信卡包,使用wx.addCard()方法传参及整体流程
一.准备: 1.经微信认证过的微信公众号. 2.经微信认证过的微信小程序号. 先来看看微信小程序官方的文档,https://developers.weixin.qq.com/miniprogram/d ...
- 微信小程序添加背景图片的坑
给微信小程序页面加载背景图片解决方案 直接附上原文地址: 给微信小程序页面加载背景图片解决方案 - YUSIR 完美CODING世界 - CSDN博客 https://blog.csdn.net/y ...
- 微信小程序添加、删除class’
终于等到公司开发小程序了,学习的时候不觉得有什么,实际开发就会出现各种问题. 今天第一天开发就遇到问题了. 项目需求,要一个平时的nav导航栏,这玩意用jQuery两行代码解决了,可是小程序不允许操作 ...
- 微信小程序—添加背景音乐
问题: 想在打开小程序时就自动播放背景音乐(循环) 解决方法: 1.思路:写一个函数,在 onLoad()中调用 2. //index.js //获取应用实例 const back = wx.get ...
- 微信小程序弹出可填写框两种方法
方法一: html页面: < view class = "container" class = "zn-uploadimg" > < butt ...
随机推荐
- Deepin深度应用商店和系统更新不正常的解决方法
Deepin深度应用商店和系统更新不正常的解决方法 2020-02-04 10:25:09作者:i8520稿源:深度站 如果你的Deepin深度应用商店和系统更新不正常,可采用以下方法来解决问题. 解 ...
- Mysql 数据库基本操作
1.数据库设置密码 [root@db02 scripts]# mysqladmin -uroot password 123 2.使用密码登录 #1.正确的方式(不规范) [root@db02 scri ...
- 自用Chrome插件推荐【附教程及下载】
自用Chrome插件推荐[附教程及下载] 豆子 1,675 人赞同了该文章 2019.11.03更新 原文同步发布在我的个人博客 Chrome插件自用blog.douzi.work 都是我自己一 ...
- 一些固化了的语音识别模块demo, 手机重力传感器获取
helloH5 这个软件里面有好多这个东东哦
- python工业互联网应用实战16-前后端分离模式之修改与删除
前一章节介绍了List页面的JQuery技术栈的迁移,这一章节我们花一些篇幅来说说修改/查看页面的技术栈迁移.相对于List的获取数据,修改页面涉及到数据Post提交到后台更新数据库.我们仍旧小步迭代 ...
- 图解CSS布局(一)- Grid布局
图解CSS布局(一)- Grid布局 先上图 简介 Grid 布局是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可 ...
- Day30 BigInteger和BigDecimal
BigInteger与BigDecimal BigInteger类 Integer类作为int的包装类,能存储的最大整型值为2 31-1,Long类也是有限的, 最大为2 63-1.如果要表示再大的整 ...
- 『动善时』JMeter基础 — 31、JMeter中BeanShell断言详解
目录 1.BeanShell简介 2.Beanshell的内置变量和方法 3.BeanShell断言界面详解 4.BeanShell断言的使用 (1)测试计划内包含的元件 (2)登陆接口请求界面内容 ...
- .Net RabbitMQ实战指南——RabbitMQ相关概念介绍
什么是消息中间件 消息(Message)是指在应用间传送的数据.消息可以非常简单,比如只包含文本字符串.JSON等,也可以很复杂,比如内嵌对象. 消息队列中间件(Message Queue Middl ...
- Guava-retry,java重试组件
使用场景 在日常开发中,我们经常会遇到需要调用外部服务和接口的场景.外部服务对于调用者来说一般都是不可靠的,尤其是在网络环境比较差的情况下,网络抖动很容易导致请求超时等异常情况,这时候就需要使用失败重 ...