效果

 

<view style="padding: 5px;">
  <movable-area style="width: 100%;height: 100%;">
    <movable-view direction="all" style="width: 50px;height: 50px;background-color: green"> 
    </movable-view>
  </movable-area>
</view>

 movable-area 必须设置 width 和height属性，不设置默认为10px

movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动

 

direction 属性movable-view的移动方向，属性值有all、vertical、horizontal、none

movable-view 默认为绝对定位，top和 left 属性为0px

使用iconfont替换移动盒子

可以直接下载-此处演示，加入项目库了

 

 

原始包-iconfont.css后面要用，记住这个文件夹

 

由于微信小程序线上的资源限制了各种接口安全域名，所以在小程序里如果想使用iconfont字体图

标就会稍有不同，其实只需要把平时的iconfont字体图标远程路径换成base64引入，就可以解决小

程序引入iconfont字体图标这个问题了

转换网址https://transfonter.org/

 上传前选中的下面三个，进度条，框框处上传进度

 Download 下载

 如果是下载几个，就复制粘贴到同一个wxss文件内

 

 

 阿里巴巴矢量图标库下载的包---请面提及让留意的css文件

 需要非框选部分

 完整

补充---（没有也可以）兼容

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'iconfont' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
 
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

 

引入 app.wxss内引入，在根目录下

 配合使用

效果