小程序movable—view移动照片

Movable-view是小程序中的一个可移动的组件，可以用来实现照片的滑动查看效果。

下面是一个简单的例子：

<view class="container">
  <swiper class="swiper">
    <swiper-item class="swiper-item" wx:for="{{images}}" wx:key="{{item}}">
      <movable-view class="movable-view" direction="all" damping="50" friction="0.5">
        <image class="image" src="{{item}}" mode="aspectFit"></image>
      </movable-view>
    </swiper-item>
  </swiper>
</view>

在这个例子中，我们使用了swiper组件来实现照片的轮播效果，每个swiper-item中包含了一个movable-view组件，用来实现照片的拖动效果。其中，direction属性指定了可移动的方向，damping属性控制了拖动的回弹效果，friction属性控制了拖动的摩擦力。

需要注意的是，由于movable-view组件会阻止事件冒泡，因此需要在movable-view组件中再嵌套一个image组件来实现图片的点击事件。

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.movable-view {
  width: 100%;
  height: 100%;
}

.image {
  width: 100%;
  height: 100%;
}

上面是对应的CSS样式，其中.container用来设置容器的样式，.swiper用来设置轮播组件的样式，.swiper-item用来设置每个轮播项的样式，.movable-view用来设置可移动的元素的样式，.image用来设置图片的样式。

这样，一个简单的照片滑动效果就完成了。