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. Chm文件阅读软件测试需求

    转发: .Chm文件阅读软件测试需求 . xchm问题太多就不考虑了: kchm是问题少一些 windows打开是乱码就不去考虑 必须在windows打开正常的再在龙芯上打开 1windows打开是乱 ...

  2. kubernetes 监控(14)

    一.Weave Scope 容器地图 创建 Kubernetes 集群并部署容器化应用只是第一步.一旦集群运行起来,我们需要确保一切正常,所有必要组件就位并各司其职,有足够的资源满足应用的需求.Kub ...

  3. python3 ftplib模块连接FTP

    from ftplib import FTP_TLS import os import re class MyFtp(FTP_TLS): """继承FTP类"& ...

  4. 僵尸进程和孤儿进程-(转自Anker's Blog)

    2.基本概念 我们知道在unix/linux中,正常情况下,子进程是通过父进程创建的,子进程在创建新的进程.子进程的结束和父进程的运行是一个异步过程,即父进程永远无法预测子进程 到底什么时候结束. 当 ...

  5. 控制器网关/dns设置

    如果控制器ping内网可以,但是ping不同外网,十有八九是因为网关的问题,可以使用route命令设置网关,如设置为192.168.31.1(不是192.168.31.0),route add def ...

  6. 达梦数据库产品支持技术学习分享_Week2

    本周主要从以下几个方面进行本人对达梦数据库学习的分享,学习进度和学习情况因人而异,仅供参考. 一.文本命令行工具使用的方法(Disql和dmfldr) 二.数据库备份 三.定时作业功能 四.系统表和动 ...

  7. Java常用集合笔记

    最近事情比较少,闲暇之余温习巩固一下Java的一些基础知识,并做一些笔记, Java常用集合, 主要参考的这篇文章:Java常用集合 ArrayList/Vertor 1. ArrayList 的主要 ...

  8. HEVC之路0:HM16.18的运行+码流分析

    1.HM下载 HM不能直接网页下载,因为它是采用svn来管理代码的,因此需要利用svn下载,这里采用TortoiseSVN(软件下载地址为https://tortoisesvn.net/)进行下载. ...

  9. ARM系统架构

    ARM系统架构 一.ARM概要 ARM架构,曾称进阶精简指令集机器(Advanced RISC Machine)更早称作Acorn RISC Machine,是一个32位精简指令集(RISC)处理器架 ...

  10. python常识系列14-->正则表达式基础之re模块

    前言 勤奋的含义是今天的热血,而不是明天的决心,后天的保证. 一.正则表达式是什么? 描述了一种字符串匹配的模式(pattern) 功能一:用来检查一个字符串串是否含有某种子字符串 功能二:将匹配的子 ...