微信小程序可移动悬浮按钮 movable-area movable-view 的使用

这篇具有很好参考价值的文章主要介绍了微信小程序可移动悬浮按钮 movable-area movable-view 的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.将整个屏幕用movable-area组件覆盖

2.在movable-area内部添加一个movable-view实现自由滑动,如下

html

<movable-area class="movable-area">
    <movable-view class="movable-view" direction="all">
    </movable-view>
</movable-area>

css

.movable-area{
    pointer-events:none;// 这个属性设置为none,让所有事件穿透过去
    z-index: 100;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .movable-view{ 
  	pointer-events:auto;// 重设为auto,覆盖父属性设置,不然的话触发不了该子元素身上的事件
    height: 50px;
    width: 50px;
    background: red;
  }

  注:movable-view的属性(此处没有列完详细请查看:movable-view | 微信开放文档

微信小程序 悬浮按钮,微信小程序,小程序

微信小程序 悬浮按钮,微信小程序,小程序

 文章来源地址https://www.toymoban.com/news/detail-760320.html

到了这里,关于微信小程序可移动悬浮按钮 movable-area movable-view 的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp微信小程序全局所有页面放置一个跳转首页的可以拖动的悬浮按钮

    把上面的静态解构放到src/components/movable/movable.vuewe文件作为自定义组件 此处用的到时uniapp的movable-area组件和内嵌 movable-view 组件,其中movable-area表示可拖动的范围,movable-view用于指示可拖动的区域。 参照文档:movable-area | uni-app官网     movable-view | uni-app官网 想要实现每个页

    2024年02月03日
    浏览(49)
  • 基于movable-view的微信小程序拖拽排序(含源码)

    目录 一、前言与效果展示 二、源码 1.目录结构 2.drag.wxml文件 3.drag.wxss文件 (1)drag.less (2)drag.wxss  不会使用less的就用这个 4.drag.js文件 5.drag.json文件 三、结语         最近在做一个账本,里面有个功能需要“拖拽排序”,网上的代码我也看不太懂,打算自己写一个。微信

    2024年02月03日
    浏览(44)
  • 微信小程序 movable-view 控制长按才触发拖动 轻轻滑动页面正常滚动效果

    今天写 movable-area+movable-view遇到了个头疼的问题 那就是 movable-view 监听了用户拖拽自己 但 我们小程序 上下滚动页面靠的也是拖拽 也就是说 如果放在这里 用户拖动 movable-view部分 就会永远触发不了滚动 那么 我们先可以 加一个 bindlongpress=\\\"longpressHandler\\\"事件 用户长按时触发 然

    2024年02月06日
    浏览(42)
  • 微信小程序 实现可拖动悬浮图标

    效果图 (1)wxml (2)js (3)wxss

    2024年02月04日
    浏览(87)
  • uniapp悬浮图标支持拖动支持微信小程序

    最近改了个UI,按钮放哪都不合适,看到别人都是用悬浮按钮,于是我自己也搞了一个,随心所欲存放位置,的确要比固定的好看的多,下面的是一个截图,代码放在下面自取 支持滑动、点击 完整代码片段:

    2024年02月11日
    浏览(50)
  • 微信小程序 按钮颜色

     

    2024年02月09日
    浏览(67)
  • 微信小程序 - 点击按钮退出小程序

    前言 有时候,用户需要点击小程序里面的某个按钮时直接退出小程序,而不是点击右上角的关闭按钮将小程序退出 解决方案 官方文档:navigator | 微信开放文档 直接使用navigator组件便可,代码如下:

    2024年02月08日
    浏览(48)
  • 微信小程序-设置倍数播放按钮

    目前微信小程序的Video并没有自带的倍数播放设置,但是官方提供了设置播放倍数的方法:VideoContext.playbackRate(number rate) | 微信开放文档 (qq.com) 用cover-view标签在video上设置按钮。 上代码(仅提供设计思路): HTML部分: CSS部分: JS部分: 效果图: 总结:用cover-view设置按钮,

    2024年02月11日
    浏览(54)
  • 微信小程序点击按钮变颜色

    微信小程序点击按钮变颜色 前端页面: js: CSS: 效果图:  

    2024年02月04日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包