zoukankan      html  css  js  c++  java
  • 微信开发新增拖动组件--movableview介绍

    小程序的更新中,也新增了一个UI组件,它就是视图组件movable-view,它需要配合movable-area来一起使用。简单来说,它就是一个支持在指定区域内可以拖动内容的容器。我们来看一个简单的示例:

    <movable-area style="height: 200px; 200px;background: red;">
      <movable-view direction="all" style="height: 50px;  50px; background: blue;">
      </movable-view>
    </movable-area>

    我们用movable-area设定了一个200x200大小的一个可拖动区域(红色),然后在这个区域内放置了一个大小为50x50的可以拖动内容movable-view(蓝色),这个可拖动内容的direction设置为all,表示可以在任意方向上进行拖动。

    拖动演示

    在一个movable-area标签中,其实不止可以放一个movable-view,它支持放置多个movable-view,看以下例子:

     

    <movable-area style="height: 200px; 200px;background: red;">
     
      <!--蓝色任意方向拖动的内容-->
      <movable-view direction="all" style="height: 50px;  50px; background: blue;">
      </movable-view>
     
      <!--黄色只能横向拖动的内容-->
      <movable-view direction="horizontal" style="height: 20px;  50px; background: yellow;">
      </movable-view>
     
    </movable-area>

    拖动演示2

    movable-view的direction属性支持以下四个值:

    • all - 任意方向拖动

    • vertical - 纵向拖动

    • horizontal - 横向拖动

    • none - 不能拖动

    前3个值好理解。如果direction设置为最后这个none,则只能依靠设置x,y属性值来为它进行在movable-area中的定位:

    <movable-area style="height: 200px; 200px;background: red;">
      <movable-view direction="none" x="50" y="50" style="height: 50px;  50px; background: blue;">
      </movable-view>
    </movable-area>

    这段代码一运行,蓝色的movable-view就显示在了(50,50)的位置上了:

     

    好了,小程序的拖动组件的功能大致就这样简单的介绍一下,希望对你有所帮助。

  • 相关阅读:
    vue 定时器销毁的问题
    学习flutter,先学dart并安装dart sdk
    vue element-ui table 列表倒计时
    微信小程序使用symbol方式使用阿里图标库
    前端处理后台返回的图片控制台输出是乱码
    uniapp 扩展组件抽屉的使用
    C# 连接MYsql 报错Authentication plugin 'caching_sha2_password' cannot be loaded
    IE上传文件报错
    C#调用JavaHttp接口抛500内部错误
    easy ui 中grid级联操作
  • 原文地址:https://www.cnblogs.com/cqlb/p/9668598.html
Copyright © 2011-2022 走看看