小程序 movable-view 在页面中的可移动图标

项目中需要一个可拖动的小图标,

1.小程序组件movable-view

文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html#movable-area

movable-view可移动的范围是在整个movable-area区域,所以movable-area是必须的,一般图标可以全屏幕移动的,movable-areas就是pages下的最高父级,包裹所有节点的

附上代码,有需要了解的可以直接留言:

wxml:

<movable-area>
  <movable-view x="{{x}}" y="{{y}}" direction="all">
   <view>
      <image bindtap='xs' mode='' src='../images/car.jpg' style="width:100rpx;height:100rpx;"></image>
    </view>
  </movable-view>
</movable-area>

wxss:

复制代码
movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: #1AAD19; */
  color: #fff;
  position: fixed;
  z-index: 9999;
  width: 176rpx;
  height: 176rpx;
  right: auto;
  background: #000;
}
movable-area {
  height: 100%;
  width: 100%;
  /* margin: 50rpx; *//* background-color: #ccc; */
  overflow: hidden;
  position: relative;
  z-index: 9999;
  background: #fff
}
复制代码

js:

x,y可以定义图标的起始位置
Page({ data:{ x:
0,    y: 0,     scale: 2, } })
movable-view属性:
  out-of-bounds:超过可移动范围是否允许拖动     默认false     为true时,可以拖动图标到范围之外一小段距离,然后平滑回到范围之内,

 

 

posted @   时光凉忆  阅读(1491)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示