您好,登录后才能下订单哦!
这篇文章主要为大家展示了“小程序moveable-area和movealbe-view有什么区别”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“小程序moveable-area和movealbe-view有什么区别”这篇文章吧。
一. movable-area
movable-view的可移动区域。
二. movalbe-view
可移动的视图容器,在页面中可以拖拽滑动
注意点
movable-view必须设置width和height。不然就会默认为10px.
movable-view必须在<movable-area/>组件中,并且必须是直接子节点,否则不能移动
movable-view 默认为绝对定位,top和left属性为0px
当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;
当movable-view大于movable-area时,movable-view的移动范围必须包含movable-area(x轴方向和y轴方向分开考虑)
三. 可运行的代码
wxml
<view class='container'>
<view class="section_title_less"> movable-view区域小于movable-area </view>
<movable-area class="area_less" scale-area>
<movable-view class="view_less" direction="all" scale inertia out-of-bounds x="{{x}}" y="{{y}}" damping="1" friction="200" bindchange="change" bindscale="scale"></movable-view>
</movable-area>
<view class="section_title_more"> movable-view区域大于movable-area </view>
<movable-area class="area_more" scale-area>
<movable-view class="view_more" direction="all">
<text>可移动的view</text>
</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("横向");
}
})
以上是“小程序moveable-area和movealbe-view有什么区别”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。