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


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一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
CSS3 绘制BMW logo实的现代码
Apr 25 HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 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
我的论坛源代码(三)
2006/10/09 PHP
实用函数8
2007/11/08 PHP
PHP的博客ping服务代码
2012/02/04 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
python xml解析实例详解
2016/11/14 Python
python连接mongodb集群方法详解
2020/02/13 Python
Python 实现一个简单的web服务器
2021/01/03 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
后勤岗位职责
2013/11/26 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
企业投资意向书
2015/05/09 职场文书
集结号观后感
2015/06/08 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
工作后的感想
2015/08/07 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫