這部分小程序組件 可移動(dòng)視圖區(qū)域·movable-area

2020-09-18 10:48 更新

版本要求:基礎(chǔ)庫 1.11.0 或更高版本;若版本較低,建議做 兼容處理。

movable-view 的可移動(dòng)區(qū)域。movable-area 必須設(shè)置 width 和 height 屬性,不設(shè)置默認(rèn)為 10px。

掃碼體驗(yàn)

示例代碼

  1. <!-- API-DEMO page/component/movable-view.axml -->
  2. <view class="page">
  3. <view class="page-description">可移動(dòng)視圖</view>
  4. <view class="page-section">
  5. <view class="page-section-title">movable-view區(qū)域小于movable-area</view>
  6. <view class="page-section-demo">
  7. <movable-area>
  8. <movable-view x="{{x}}" y="{{y}}" direction="all">movable-view</movable-view>
  9. </movable-area>
  10. </view>
  11. <button style="margin-left: 10px; mrigin-right: 10px;" type="primary" onTap="onButtonTap">點(diǎn)擊移動(dòng)到 (30px, 30px)</button>
  12. </view>
  13. <view class="page-section">
  14. <view class="page-section-title">movable-view區(qū)域大于movable-area</view>
  15. <view class="page-section-demo">
  16. <movable-area>
  17. <movable-view class="max" direction="all">movable-view</movable-view>
  18. </movable-area>
  19. </view>
  20. </view>
  21. <view class="page-section">
  22. <view class="page-section-title">只可以橫向移動(dòng)</view>
  23. <view class="page-section-demo">
  24. <movable-area>
  25. <movable-view direction="horizontal">
  26. movable-view
  27. </movable-view>
  28. </movable-area>
  29. </view>
  30. </view>
  31. <view class="page-section">
  32. <view class="page-section-title">只可以縱向移動(dòng)</view>
  33. <view class="page-section-demo">
  34. <movable-area>
  35. <movable-view direction="vertical">
  36. movable-view
  37. </movable-view>
  38. </movable-area>
  39. </view>
  40. </view>
  41. </view>
  42. // API-DEMO page/component/movable-view.js
  43. Page({
  44. data: {
  45. x: 0,
  46. y: 0,
  47. },
  48. onButtonTap() {
  49. const { x, y } = this.data;
  50. if (x === 30) {
  51. this.setData({
  52. x: x + 1,
  53. y: y + 1,
  54. });
  55. } else {
  56. this.setData({
  57. x: 30,
  58. y: 30
  59. });
  60. }
  61. },
  62. });
  63. // API-DEMO page/component/movable-view.json
  64. {
  65. "allowsBounceVertical": "NO"
  66. }
  67. /* API-DEMO page/component/movable-view.acss */
  68. movable-area {
  69. height: 400rpx;
  70. width: 400rpx;
  71. margin: 50rpx 0rpx 0 50rpx;
  72. background-color: #ccc;
  73. overflow: hidden;
  74. }
  75. movable-view {
  76. display: flex;
  77. align-items: center;
  78. justify-content: center;
  79. height: 200rpx;
  80. width: 200rpx;
  81. background: #108ee9;
  82. color: #fff;
  83. }
  84. .max {
  85. width: 600rpx;
  86. height: 600rpx;
  87. }

屬性

屬性名 類型 默認(rèn)值 必填 描述 最低版本
scale-area Boolean false 當(dāng)里面的 movable-view 設(shè)置為支持雙指縮放時(shí),設(shè)置此值可將縮放手勢生效區(qū)域修改為整個(gè) movable-area。 1.20.0
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)