微信小程序视图容器 movable-area


当前第2页 返回上一页

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

注意:movable-view必须在<movable-area/>组件中,并且必须是直接子节点,否则不能移动。

示例代码:

<view class="section">
  <view class="section__title">movable-view区域小于movable-area</view>
  <movable-area style="height: 200px;width: 200px;background: red;">
    <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
    </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: 100px;width: 100px;background: red;" direction="all">
    <movable-view style="height: 200px; width: 200px; background: blue;">
    </movable-view>
  </movable-area>
</view>
Page({
  data: {
    x: 0,
    y: 0
  },
  tap: function(e) {
    this.setData({
      x: 30,
      y: 30
    });
  }
})

标签:微信小程序

返回前面的内容

相关阅读 >>

微信小程序 全局配置

sdk数据库 database服务端时间的引用

微信小程序 数据预拉取

微信小程序绘图api中创建二次方贝塞尔曲线

微信小程序api 获取位置

微信小程序api 绘图strokerect(画一个矩形,非填充)

微信小程序云开发 多端支持

微信小程序api 绘图draw(进行绘图)

微信小程序api nfc-nfca标签

微信小程序 回传广告数据

更多相关阅读请进入《微信小程序》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...