小程序实现悬浮按钮的全过程记录


Posted in HTML / CSS onOctober 16, 2021

前言

在日常小程序开发中,我们可能会有这样的需求,将按钮悬浮,不随着页面的滑动而改变位置,例如文章详情页的分享按钮,我想做成悬浮的样子,或者首页设置一个悬浮按钮来实现一些可扩展的功能,既美观又方便实用

实现悬浮按钮我将从两方面进行讲解,一个是实现图片按钮,另一个是将按钮进行悬浮。

图片按钮实现

在小程序提供的button组件中,没有单独将图片设置成按钮的功能,虽然小程序没有天然的组件支持,但是我们可以自己实现这样的效果

先上代码

页面代码

<!--pages/content-detail/content-detail.wxml-->
<button plain='true'   class="circle">
  <image mode='aspectFill' src='/images/icon/collect.png' class='image'></image>
</button>

css样式代码

.circle[plain] {
  padding: 0;
  border: none;
  width: 64rpx;
  height: 64rpx;
}
​
.image {
  width: 64rpx;
  height: 64rpx;
}

circle是按钮的类,image是图片的类

代码很简单,小蛋为大家解释下上面的代码

  • 隐藏按钮的显示
     

我们是要将图片显示出来,按钮包装的是图片,所以要将按钮隐藏,plain='true' 这个属性即可实现。

  • 隐藏按钮的边框
     

除了要隐藏按钮,还需要将其边框进行隐藏,对应的css样式为:border: none ,这里要注意,css的类上一定要加 [plain]
例如 .circle[plain] ,不加的话边框可能不会消失。

  • 图片和按钮对齐
     

图片的大小需要和按钮的大小保持一致,为了做到对齐,button中的css样式要设置padding:0

悬浮按钮实现

图片按钮设置好了,我们就要对其进行悬浮进行实现,要达到悬浮的效果只需要将按钮样式的position设置为fixed即可

.circle[plain] {
  display: flex;
  margin-right: 40rpx;
  right: 0;
  position: fixed;
  bottom: 15%;
  padding: 0;
  border: none;
  width: 64rpx;
  height: 64rpx;
}

position是位置属性,它有许多不同的值,我们来看下官方给出的fixed的定义

不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先。

悬浮按钮的代码我们就已经完全实现了,我们来看下具体的效果

小程序实现悬浮按钮的全过程记录

总结

整个悬浮按钮的实现其实代码量并不多,主要还是要对css的知识要掌握的更透彻,实现起来就没那么难,悬浮按钮的实现只是一盘小菜

到此这篇关于小程序实现悬浮按钮的文章就介绍到这了,更多相关小程序实现悬浮按钮内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
浅析CSS在DevTools 中架构演变
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 #HTML / CSS
Canvas绘制像素风图片的示例代码
Canvas如何做个雪花屏版404的实现
使用canvas对video视频某一刻截图功能
Sep 25 #HTML / CSS
使用CSS实现一个搜索引擎的原理解析
You might like
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
Python类定义和类继承详解
2015/05/08 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
Python 支付整合开发包的实现
2019/01/23 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
英国航空官网:British Airways
2016/09/11 全球购物
加拿大时装零售商:Influence U
2018/12/22 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
如何写一个自定义标签
2012/12/28 面试题
酒店服务与管理毕业生求职信
2013/11/02 职场文书
医学护理毕业生自荐信
2013/11/07 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL