可移动的视图容器,在页面中可以拖拽滑动

支持度

微信小程序H5ReactNative百度小程序支付宝小程序字节跳动小程序
✔️x️ ✔️✔️

具体属性参考相关小程序官网,属性值请改写为驼峰式命名。

微信小程序 movable-view

百度小程序 movable-view

支付宝小程序 movable-view

示例:
  1. import Taro, { Component } from '@tarojs/taro'
  2. // 引入 MovableArea, MovableView 组件
  3. import { MovableArea, MovableView } from '@tarojs/components'
  4. class App extends Components {
  5. render () {
  6. return (
  7. <MovableArea style='height: 200px; width: 200px; background: red;'>
  8. <MovableView style='height: 50px; width: 50px; background: blue;' direction='all'></MovableView>
  9. </MovableArea>
  10. )
  11. }
  12. }