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">签&nbsp;&nbsp;到</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;
}

效果:

微信小程序 添加左边固定浮动框的更多相关文章

  1. 微信小程序添加悬浮在线客服会话按钮

    微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用.客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会 ...

  2. 图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作

    图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...

  3. 微信小程序添加外部地图服务数据

    先上效果: 缘起 使用微信小程序做地图相关功能的时候,有个需求是需要接入自己发布的地图服务.查看微信小程序地图组件文档,发现它对地图相关的支持很少,只有一些基础功能,比如添加点.线.面.气泡和一些常规 ...

  4. 微信小程序自定义组件-下拉框

    这个是网址https://www.cnblogs.com/zjjDaily/p/9548433.html 微信小程序之自定义select下拉选项框组件 知识点:组件,animation,获取当前点击元 ...

  5. 微信小程序添加卡券到微信卡包,使用wx.addCard()方法传参及整体流程

    一.准备: 1.经微信认证过的微信公众号. 2.经微信认证过的微信小程序号. 先来看看微信小程序官方的文档,https://developers.weixin.qq.com/miniprogram/d ...

  6. 微信小程序添加背景图片的坑

    给微信小程序页面加载背景图片解决方案 直接附上原文地址: 给微信小程序页面加载背景图片解决方案 - YUSIR 完美CODING世界 - CSDN博客  https://blog.csdn.net/y ...

  7. 微信小程序添加、删除class’

    终于等到公司开发小程序了,学习的时候不觉得有什么,实际开发就会出现各种问题. 今天第一天开发就遇到问题了. 项目需求,要一个平时的nav导航栏,这玩意用jQuery两行代码解决了,可是小程序不允许操作 ...

  8. 微信小程序—添加背景音乐

    问题:  想在打开小程序时就自动播放背景音乐(循环) 解决方法: 1.思路:写一个函数,在 onLoad()中调用 2. //index.js //获取应用实例 const back = wx.get ...

  9. 微信小程序弹出可填写框两种方法

    方法一: html页面: < view class = "container" class = "zn-uploadimg" > < butt ...

随机推荐

  1. linux查看文件的编码格式的方法 set fileencoding PYTHON

    linux查看文件的编码格式的方法 set fileencoding   乱码原因:因为你的文件声明为utf-8,并且也应该是用utf-8的编码保存的源文件.但是windows的本地默认编码是cp93 ...

  2. zabbix官方源替换为阿里云的zabbix源,一键脚本。(安装zabbix报错curl#18 - "transfer closed with 2988713 bytes remaining to read":15 ETA Trying other mirro)

    最近突然安装zabbix总是报错,比如 (24/27): t1lib-5.1.2-14.el7.x86_64.rpm | 166 kB 00:00:00 zabbix-web-4.4.6-1.el7. ...

  3. python基础之面向对象(二)(封装、继承、多态)

    一.封装 (1)封装是面向对象的一大特点 (2)面向对象编程的第一步--将属性和方法封装到一个抽象的类当中 (3)外界使用类创建对象,然后让对象调用方法 (4)对象方法的细节都被封装在类的内部 1.案 ...

  4. C++ short/int/long/long long 等数据类型大小

    表 1 整型数据类型 数据类型 字节大小 数值范围 short int (短整型) 2 字节 -32 768 〜+32 767 unsigned short int(无符号短整型) 2 字节 0 〜+ ...

  5. 第七章 DevOps工具链

    DevOps工具生态圈 协同开发工具 敏捷开发 可视化 加强团队沟通协作 数据分析 协同开发 持续集成工具 Jenkins 自动化编译 自动化测试 自动化部署 丰富的插件库 版本管理工具 Git 简介 ...

  6. error – Public key for *.rpm is not installed (--nogpgcheck)

    docker容器删除的东西比较多,有很多东西都没有,配置上源后发现有也问题 第一是源的选择不对应系统版本,第二是找不到gpgcheck文件 如果一时半会找不到gpgchenck file,使用 --n ...

  7. C#异常处理18条最佳实践

    首先,异常处理应该是系统设计规约的一部分出现在系统设计文档中,而不仅仅是一种技术实现. 作为设计文档的一部分,异常处理应该着眼于系统容错性和稳定性(正如楼主提到的那样).然后在根据这个规约,再来具体讨 ...

  8. 浅析PriorityBlockingQueue优先级队列原理

    介绍 当你看本文时,需要具备以下知识点 二叉树.完全二叉树.二叉堆.二叉树的表示方法 如果上述内容不懂也没关系可以先看概念. PriorityBlockingQueue是一个无界的基于数组的优先级阻塞 ...

  9. 能够划分局域网的VLAN

    VLAN与三层交换机 1. VLAN的概述与优势 1.1 分割广播域 1.2 VLAN的优势 2. VLAN的种类 2.1 静态VLAN 2.2 动态VLAN 3. VLAN的ID 4.三层交换机转发 ...

  10. 转载 | Scala 如何避免使用 Null

    在 Java 里,null 是一个关键字,不是一个对象,所以对它调用任何方法都是非法的. Scala 的 Option类型 Scala在变量和函数返回值可能不会引用任何值的时候使用 Option 类型 ...