微信小程序 -- 右下角的悬浮效果，实现刷新功能（可拖拽）

最新推荐文章于 2024-08-05 21:10:20 发布
最新推荐文章于 2024-08-05 21:10:20 发布
阅读量6.8k 收藏 30
点赞数 2
分类专栏： 微信小程序 文章标签： movable-area movable-view
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41638795/article/details/101055941
版权
本文介绍了如何在微信小程序中创建一个悬浮的刷新按钮，该按钮位于右下角，具有拖拽功能。通过封装组件'movableView'，利用movable-area和movable-view组件，配合wxss和js实现拖拽和点击事件。详细讲解了组件的生命周期、配置及使用方法。
摘要由CSDN通过智能技术生成

如下效果图，右下角有个绿色背景的刷新按钮，这个按钮是悬浮着，可拖拽。这个悬浮效果，我只举例刷新的功能，当然也可以做回到顶部等类似的功能。

第一个截图是初始页面加载完的效果，第二个截图是拖拽后的效果，第三个截图是点击3次刷新按钮后的效果。

      

一.封装组件

创建一个组件"movableView"，用于实现刷新功能

1.movableView.wxml内容

movable-area组件：是movable-view的可移动区域，必须需设置width,height。这里x,y的值，是在js中获取使用设备的windowWidth、windowHeight，具体后面再讲。

movable

最低0.47元/天 解锁文章
星星之火M
关注
专栏目录
微信小游戏游戏上线之路：教你如何免费获得CDN服务器
陈言必行 -- Unity游戏开发领域优质博主
07-30 1521
本文将教你如何免费获得CDN服务器，使用CDN服务器来提高游戏的加载速度和稳定性。
操作按钮悬浮固定在微信小程序底部的实现代码
12-11
本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单，还不会的朋友一起跟着小编学习一下吧，希望对你们有所帮助。 　　常见的有加入购物车按钮、结算按钮、收货列表添加地址按钮。 　　以收货地址为例，将添加地址按钮悬浮于最底部，这样再多的地址，也不会被遮挡而看不见。 　　核心代码如下： 　　添加　 /*添加地址按钮*/ 　　.address-add { 　　position: fixed; 　　bottom: 0; 　　width: 100%; 　　} 　　改用position: fixed之后，其中width需要设置为100%，不然会是一个很窄的按钮。 　　考虑到按钮自
微信小程序-右侧浮动导航
12-14
微信小程序-右侧浮动导航，微信小程序-右侧浮动导航，微信小程序-右侧浮动导航，微信小程序-右侧浮动导航，
微信小程序--18（自定义组件3）
最新发布
qq_57464528的博客
08-05 613
在小程序组件中，最重要的生命周期函数有3个，分别是created、detached、attached。它们的特点如下： 1.组件实例刚被创建的好的时候，created生命周期函数会被触发 此时不呢调用setData，且在这个生命周期函数中，只应该用于给组件的this添加一些自定义的属性字段。 2.在组件完全初始化完毕、进入页面节点树后，attached生命周期函数会被触发 此时，this.data已被初始化完毕，这个生命周期中绝大多数的初始化工作都可以在这个时机进行。
【微信小程序】悬浮按钮
Jessieeeeeee的博客
11-18 3791
效果 需要制作一个如下图右下角的悬浮按钮： 代码 index.wxml <!-- 发布悬浮按钮 --> <view class="releaseBtn" bind:tap="gotoRelease"> <image class="releaseIcon" src="/images/pen.png" /> </view> index.scss // 发布悬浮按钮 .releaseBtn { position: fixed; bottom: 50p
微信小程序悬浮按钮
热门推荐
WindyMing的博客
04-19 4万+
在微信小程序开发过程中，我们一般会使用到类似android一样的布局，在页面的右下方固定一个悬浮。那么下面就简单讲解下如何具体的实现。 先上下效果图，这边可以看到右下方有个固定的悬浮按钮。设置一下图片的位置就可以实现这个效果了。 //wxss代码 .add_icon{ position: fixed; width:42px; ...
微信小程序悬浮功能小按钮
weixin_45846177的博客
12-03 5716
如上图所示，废话不多说，直接上代码 一、WXML <view class="menu-box"> <view class="navbar {{ play?'active':'' }}"> <view class="btn" bindtap="changePlay"> <view class="line" animation="{{...
微信小程序实现可移动悬浮按钮（超简单）
qq_35487047的博客
03-19 1万+
微信小程序实现可移动悬浮按钮（超简单） 最近被用户要求再每个页面显示一个悬浮按钮实现业务，what fuck？？！！！ 虽然内心不愿意，但是身体还是得接受。。 首先偷懒百度，发现网络上都是自己捕捉touch事件做的，以我的经验这种实现方式肯定一堆bug,并且页面会卡顿，果断不踩坑。希望大家也不要踩坑~ 实现方案：我们可以利用微信小程序的内置组件轻松实现！ 1.将整个屏幕用movable-area组...
微信小程序复习总结
2302_81909561的博客
04-27 1013
微信小程序简介微信小程序是一种由腾讯开发的应用程序软件，可在微信内直接使用，无需下载和安装。小程序的设计理念是"用完即走，无需安装"，旨在为用户提供轻量级的移动应用体验。通过微信平台提供的接口和工具，开发者可以创建不同类型的小程序，覆盖多个领域，如购物、社交、娱乐等。工具栏：在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。模拟区：在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。
工作成长记录（二）悬浮按钮组件
SeriousSnow的博客
06-15 421
说明 我是一个还几乎没怎么用过框架的没写过什么项目，没多人协作写代码的经验的FW~~，所以以下内容只是我这个新手今天开始折腾的思考。。 前言 话说本来今天的计划是学习React，为做一个网页做准备了。突然又多了一个任务，需要在小程序的很多页面里添加一个悬浮按钮，效果类似iPhone那个球，可以随意拖动，然后会自动吸附到左边或者右边，点击出现蒙版出来其他功能按钮。 使用自定义组件 好多页面都需要，那不用说了肯定又是做成组件了。虽然我当下对组件的复用很方便并不是报太大希望。。 微信官方组件 最好的情况当然就是微
各种框架和效果网址
海阔天空
04-16 759
Android 工具类 史上最全的开发工具类 EditText限制输入最大最小值 文件夹工具类MaterialFilePicker: Material file picker for Android Android这可能是当今最火，功能最全的快速开发框架了 - CSDN博客 框架 网络框架 文件下载 ...
早日下班小技巧，建议收藏哦！2020最新Android常用开源库总结
Android565的博客
04-25 803
前言 收集了一些比较常见的开源库，特此记录（已收录350+）。另外，本文将持续更新，大家有关于Android 优秀的开源库，也可以在下面留言。 一 、基本控件 1.TextView HTextView 一款支持TextView文字动画效果的Android组件库。 ScrollNumber 滚动数字控件 ticker 滚动数字控件 ReadMoreTextView 阅读更多，折叠文本 ExpandableTextView 折叠文本 android-autofittextview 自动调整文
微信小程序悬浮按钮实现
weixin_43926650的博客
03-21 707
先看看效果： 可以在界面中随便移动 代码很少，直接上代码： wxml文件 <movable-area class="movable-area"> <movable-view class="movable-view" direction="all" catchtap="toAddConsult"> <view class="plus-position">+</view> </movable-view> </mova
微信小程序悬浮球效果
weixin_42125944的博客
11-26 3255
用的是微信文档里的组件movable-area和movable-view <movable-area class="movable-area"> <movable-view class="movable-view" x="{{x}}" y="{{y}}" direction="all" bindchange="bindcmove" bindtou
微信小程序的悬浮按钮
kerryqpw的博客
12-18 1万+
微信小程序的悬浮按钮
微信小程序（可拖动悬浮按钮）
棉裤开档的博客
04-27 7421
整体效果图 介绍 视图组件movable-view，它需要配合movable-area来一起使用。简单来说，它就是一个支持在指定区域内可以拖动内容的容器。 微信API地址： https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html 案例代码： <movable-area style="point...
右下角的悬浮按钮
qq_44747508的博客
01-15 1849
在网页上做一个右下角悬浮的按钮 代码： <div onclick="location.href='invite3'"> <img src="./xuanfu.png" style="width: 5rem;height: 5rem;position: fixed;bottom: 5rem;right: 1rem;z-index: 9999;" /> <...
微信小程序 悬浮按钮 返回和分享按钮
不知火猪
02-22 1802
效果图： 数据： 依赖微信小程序接口wx.redirectTo、onShareAppMessage来完成 跳转接口： https://developers.weixin.qq.com/miniprogram/dev/api/wx.redirectTo.html?search-key=redirectTo 前端处理： 1.设置两个按钮 2。绑定对应的事件 wxml代码： css代码： ###...
微信小程序scroll-view实现导航栏点餐功能详解
"微信小程序利用scroll-view组件实现了一个左侧导航栏与右侧内容同步滚动的点餐功能。用户点击导航栏中的种类，页面会自动滚动到对应的商品锚点，同时选中的种类在导航栏中高亮显示。" 在微信小程序开发中，`scroll...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值