全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[保定网优化seo公司]微信小程序新增的拖动组件movable-view的使用介绍

  这篇文章主要给大家介绍了微信小程序最近新增的拖动组件movable-view的简单使用教程,文中介绍的非常详细•▼•▷,对大家具有一定的参考学习价值-☆◁,需要的朋友们下面来一起看看吧。

  前言

  小程序在520节日前夜◆◁●■,让程序员们又躁动了一把,更新了一些很诱人的功能,如内容转发API,iBeacon API▼◆,北宁市小程序制作公司振动API,屏幕亮度调节API等,也增强了地图组件的功能。

  此次的更新中▽•☆,也新增了一个UI组件,它就是视图组件movable-view,它需要配合movable-area来一起使用。简单来说,南康市小程序开发哪家好它就是一个支持在指定区域内可以拖动内容的容器。

  我们来看一个简单的示例:

  

 

  

<movable-area style="height◁▷: 200px◇◁-;width: 200px;background=▪•: red;"■◇○;>
 <★▼▷;movable-view direction="-○;all"◁▽•; style="height: 50px; width=◇▪: 50px; background: blue□▼=;">
 <-▷▼;/movable-view>
</movable-area>

 

  

 

  

界面
 

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

  


拖动演示
 

  在一个movable-area标签中,其实不止可以放一个movable-view,[保定网优化seo公司]它支持放置多个movable-view☆◆□■,看以下例子:

  

 

  

<movable-area style="height: 200px;width: 200px••-…;background▪▲△◇: red;">
 <▲□•▲;!--蓝色任意方向拖动的内容-->
 <★◁◁;movable-view direction="all" style="◁▲▲;height: 50px; width●◁■…: 50px=◁; background: blue◇□▷;">◆▪;
 </movable-view>
 <!--黄色只能横向拖动的内容-->
 <movable-view direction="▼■;horizontal" style="height: 20px; width: 50px; background▷-■◆: yellow;">
 </movable-view>◁•◇-;
<▷●☆-;/movable-area>

 

  

 

  

界面2

  

 

  

拖动演示2
 

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

  

  •  

      all - 任意方向拖动

      

  •  

      vertical - 纵向拖动

      

  •  

      horizontal - 横向拖动

      

  •  

      none - 不能拖动
     

      

 

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

  

 

  

<…▲•;movable-area style="▲▪△;height□◁☆: 200px;width: 200px;background: red•△;">
 <•▲;movable-view direction="none" x="50"-◁▷; y="50" style="height: 50px☆=◆◇; width: 50px; background■★: blue;"•▽;>
 <△☆;/movable-view>△△■;
<◆★▷;/movable-area>

 

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

  


 

  以上就是本文的全部内容△◁■,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网••●■!

  相关推荐:

  微信小程序通过api接口将json数据展现到小程序
 

  微信小程序城市定位的实现
 

  微信小程序button组件的使用介绍
 

  

 

  以上就是微信小程序新增的拖动组件movable-view的使用介绍的详细内容,更多请关注久澳传媒编程栏目其它相关文章!17 2020.10 [东营专业seo公司]小程序中页面兼容h5标签的解析 本篇文章给大家带来的内容是关于小程序中页面兼容h5标签的解析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助=。 有时候当小程序向后台拿数据是一篇html标签

[保定网优化seo公司]微信小程序新增的拖动组件movable-view的使用介绍

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。