微信小程序组件movable-view

movable-area:movable-view 的可移动区域

注意:movable-area 必须设置width和height属性,不设置默认为10px


movable-view:可移动的视图容器,在页面中可以拖拽滑动

微信小程序组件movable-view_第1张图片

注意:

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

2、当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;当movable-view大于movable-area时,movable-view的移动范围必须包含movable-area(x轴方向和y轴方向分开考虑)

3、movable-view必须在组件中,并且必须是直接子节点,否则不能移动。

.wxml代码

微信小程序组件movable-view_第2张图片
微信小程序组件movable-view_第3张图片

微信小程序组件movable-view_第4张图片
微信小程序组件movable-view_第5张图片

微信小程序组件movable-view_第6张图片
微信小程序组件movable-view_第7张图片

微信小程序组件movable-view_第8张图片
微信小程序组件movable-view_第9张图片

微信小程序组件movable-view_第10张图片
微信小程序组件movable-view_第11张图片

.wxss代码

微信小程序组件movable-view_第12张图片

.js代码

微信小程序组件movable-view_第13张图片

你可能感兴趣的:(微信小程序组件movable-view)