小程序moveable-area 和 movealbe-view
2018-06-19|HiShop
導讀:小程序movable-area與小程序movable-view有什么區(qū)別,在開發(fā)過程中要注意什么,下面為大家介紹。...
小程序movable-area與小程序movable-view有什么區(qū)別,在開發(fā)過程中要注意什么,下面為大家介紹。
一. movable-area
movable-view的可移動區(qū)域。
二. movalbe-view
可移動的視圖容器,在頁面中可以拖拽滑動
- 注意點
- movable-view必須設置width和height。不然就會默認為10px.
- movable-view必須在<movable-area/>組件中,并且必須是直接子節(jié)點,否則不能移動
- movable-view 默認為絕對定位,top和left屬性為0px
- 當movable-view小于movable-area時,movable-view的移動范圍是在movable-area內(nèi);
- 當movable-view大于movable-area時,movable-view的移動范圍必須包含movable-area(x軸方向和y軸方向分開考慮)
三. 可運行的代碼
wxml
- <view class='container'>
- <view class="section_title_less"> movable-view區(qū)域小于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區(qū)域大于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({
- /**
- * 頁面的初始數(shù)據(jù)
- */
- data: {
- x: "100px",
- y: "10px"
- },
- /**
- * 生命周期函數(shù)--監(jiān)聽頁面加載
- */
- 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("橫向");
- }
- })
您可能感興趣:小程序開發(fā)
上一篇:微信小程序open-data更改頭像顯示樣式 下一篇:拉勾小程序開發(fā)案例