微信小程序day02_08之可拖动与可缩放view

浅浅的花香味﹌ 2022-03-10 08:36 805阅读 0赞

### 文章目录 ###

*   *   *  一. 可拖动view
         *  二. 可缩放view

### 一. 可拖动view ###

`movable-view` 与`movable-area` 是需要捆绑在一起使用的.

`movable-area` 包裹了movable-view  
其中`movable-area` 的属性如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]  
代码示例:  
在wxml中的代码如下

<movable-area class="father-size">
    
        <movable-view class='size d' direction="all" inertia="true" out-of-bounds="false" x="50" y="50" damping="900" friction="100" bindchange="mychangeevent">
        </movable-view>
    </movable-area>

js中代码如下

// pages/moveable/moveable.js
    Page({ 
      mychangeevent: function(){ 
        console.log("我被移动了")
      }
    })

wxss 中的代码如下

.container{ 
      display: flex;
      white-space: nowrap  /* 不换行 */
    }
    
    .size { 
      width: 100rpx;
      height: 150rpx;
    }
    
    .father-size { 
      width: 100%;
      height: 650rpx;
      background-color: gray;
    }
    
    .d { 
      background: orange;
      order: 2;
       flex: 2
    }

效果如图 `movable-area` 为灰色的区域.  
橙色的区域为可拖动的滑块  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]  
当滑块被拖动时, 触发了`bindchange` 事件, 打印如下 :  
![20190310145311644.png][]

### 二. 可缩放view ###

代码示例  
在wxml中的代码如下  
其中设置了`scale`属性为true ,代表为可缩放的.  
并且绑定了`bindscale` 事件, 用于被缩放时, 触发的事件

<movable-area class="father-size">
        <movable-view class='size d' direction="all" inertia="true" out-of-bounds="false" x="50" y="50" damping="900" friction="100" bindchange="mychangeevent" scale="true" bindscale="myscaleevent">
        
        </movable-view>
    </movable-area>

在wxss中修改默认的可拖动块的样式

.size { 
      width: 250rpx;
      height: 250rpx;
    }

在js中写如下的函数

Page({ 
      myscaleevent: function () { 
        console.log("缩放中")
      }
    
    })

预览如下, 在手机上可对橙色的块,进行双手的放大与缩小的操作.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4][]

官方文档  
[https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html][https_developers.weixin.qq.com_miniprogram_dev_component_movable-view.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220310/bc262cfa6dfb40b1a0c03d996e11453b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220310/ed756b9f8a184c448fa98c31c4a08aba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20220310/781990815bb8486591553cc586370567.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20220310/b06d6302be9e4923b197fa9b74633daf.png
[20190310145311644.png]: /images/20220310/090491a952264b759d4d00b9eed8102a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4]: /images/20220310/c04249efee0e4d348faa42179c597629.png
[https_developers.weixin.qq.com_miniprogram_dev_component_movable-view.html]: https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html