0
点赞
收藏
分享

微信扫一扫

【Kevin Learn 小程序】-->movable-view

效果图

【Kevin Learn 小程序】-->movable-view_xml

属性

参考:​​movable-view​​

实例

  1. app.js
//app.js
App({
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
},
globalData: {
hasLogin: false
}
})
  1. app.json
{
"pages": [
"pages/movable/movable"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
  1. movable.js
Page({
data: {
x: 0,
y: 0
},
tap: function (e) {
this.setData({
x: 30,
y: 30
});
},
onChange: function (e) {
console.log('this is touch change');
console.log(e.detail)
},
onScale: function (e) {
console.log('this is scale change');
console.log(e.detail)
}
})
  1. movable.json
{
"navigationBarTitleText": "movable-view组件"
}
  1. movable.wxml
<!--pages/movable/movable.wxml-->
<view class="section">
<view class="section__title">movable-view区域小于movable-area</view>
<movable-area style="height: 200px; width: 200px; background: red;margin: 0 auto;">
<movable-view
style="height: 50px; width: 50px; background: blue;"
x="{{x}}"
y="{{y}}"
direction="all"
inertia="true"
>
</movable-view>
</movable-area>
<view class="btn-area">
<button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
</view>
<view class="section__title">movable-view区域大于movable-area</view>
<movable-area style="height: 50px; width: 50px; background: red;margin:0 auto 200px;">
<movable-view
style="height: 140px; width: 140px; background: blue;"
direction="all">
</movable-view>
</movable-area>
<view class="section__title">可缩放</view>
<movable-area style="height: 200px; width: 200px; background: red;margin: 0 auto;" scale-area>
<movable-view
style="height: 50px; width: 50px; background: blue;"
direction="all"
bindchange="onChange"
bindscale="onScale"
scale
scale-min="0.5"
scale-max="4"
scale-value="2">
</movable-view>
</movable-area>
</view>
  1. movable.wxss
/* pages/movable/movable.wxss */
.btn-area {
width: 590rpx;
margin: 12rpx auto 0;
}


举报

相关推荐

0 条评论