0579-8699-3791

义乌网站建设 APP开发 要找 ➙ 专业的义乌网络公司

知识

本篇经验将继续分享微信软件中movable-view可移动缩放类视图容器组件的使用详解,注意,该容器类视图组件需要通过包装元素来定义可移动区域。本篇经验将基于第一个手工构建的微信

您当前位置>主页 > 知识 > 软件开发 >

微信软件视图容器类组件使用详解

发表时间:2020-08-18 21:30 文章来源:admin

  本篇经验将继续分享微信软件中 movable-view 可移动缩放类视图容器组件的使用详解,注意,该容器类视图组件需要通过 包装元素来定义可移动区域。本篇经验将基于第一个手工构建的微信软件演示,具体构建步骤,可以参考如下经验引用。

  0微信软件开发实战--手工开发第一个软件

  微信软件视图容器类组件movable-view使用详解步骤阅读微信开发者工具1

 

 

  先百度搜索查看 movable-view 组件的官方文档,该组件属性较多,文档对各个属性的介绍也比较详尽,注意,movable-view 组件必须作为 movable-area 组件的直接子节点使用,后者定义了前者可移动缩放的区域。

 

 

  微信软件视图容器类组件movable-view使用详解步骤阅读2

 

 

  wxml 中通过 定义可滑动缩放区域,通过 创建可滑动缩放的视图容器组件。并配置 movable-view 如下属性:

 

 

  1. x , y : 定义滑块初始位置,通过数据绑定完成;

 

 

  2. direction :滑动方向不限制;

 

 

  3. scale, scale-min, scale-max : 开启缩放特性,并设置最大最小比例;

 

 

  4. bindchange, bindscale : 设置滑块滑动和缩放的回调函数。

 

 

  微信软件视图容器类组件movable-view使用详解步骤阅读3

 

 

  js 文件中定义上述绑定的数据变量以及滑动与缩放事件对应的回调函数,回调函数中目前仅仅在工具的调试器中打印一段日志信息。

 

 

  微信软件视图容器类组件movable-view使用详解步骤阅读4

 

 

  保存编译后,在模拟器中查看界面效果,移动滑块后,在调试器中可以看到定义的回调函数被触发执行;注意,模拟器中目前无法模拟手指缩放动作。

 

 

  微信软件视图容器类组件movable-view使用详解步骤阅读5

 

 

  通过工具提供的“真机调试”功能,可以在真实手机上查看调试软件,可实现滑块缩放的效果。

 

 

  微信软件视图容器类组件movable-view使用详解步骤阅读END开发者工具中目前无法完成手指缩放的动作。在开发过程中,要有查看官方文档,并且多动手测试的好习惯。经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。举报作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。

 

相关案例查看更多