小程序moveable-area 和 movealbe-view

惠民小程序小编了解到，微信小程序成为当下热门话题，下面从多个方面来谈谈小程序moveable-area 和 movealbe-view 。

最新消息， 探悉，筹备已久的微信「令吉钱包」將在6月份开跑，这也意味着马来西亚微信用户再等多几天

小程序movable-area与小程序movable-view有什么区别，在开发过程中要注意什么，下面为大家介绍。

一. movable-area

movable-view的可移动区域。

二. movalbe-view

可移动的视图容器，在页面中可以拖拽滑动

movable-view必须设置width和height。不然就会默认为10px.movable-view必须在组件中，并且必须是直接子节点，否则不能移动movable-view 默认为绝对定位，top和left属性为0px当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）

三. 可运行的代码

wxml

movable-view区域小于movable-area movable-view区域大于movable-area 可移动的view

wxss

.container {display: flex;flex-direction: column;align-items: center;}.section_title_less {font-size: 28rpx;}.area_less {height: 200px;width: 200px;background-color: red;}.view_less {height: 50px;width: 50px;background-color: yellow;}.section_title_more {font-size: 28rpx;margin-top: 50px;}.area_more {height: 50px;width: 50px;background-color: red;}.view_more {height: 200px;width: 200px;border-color: green;border-width: 2px;border

js

Page({/*** 页面的初始数据*/data: {x: "100px",y: "10px"},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},change: function (event) {// console.log(event);},scale: function (event) {// console.log(event);},vtouchmove: function (event) {console.log("纵向");},htouchmove: function (event) {console.log("横向");}})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!