小程序实现跟手轮播非 swiper组件

小程序实现跟手轮播非 swiper组件
HTML

<view>
  <movable-area class="movable-area">
    <movable-view animation="{
   {animation}}" damping="30" onTransitionEnd="onTransitionEnd" onChangeEnd="onChangeEnd" onTouchStart="start" onTouchEnd="end" onChange="onChange" style="--width:{
   {bannerArray.length * 726}}px;" x="{
   {x}}" class="movable-view" direction="horizontal">
      <view a:for="{
   {bannerArray}}" class="img" style="background-image:url({
   {item.image}});background-size:100% 100%;">
      </view>
    </movable-view>
  </movable-area>
</view>

css

.container{
   
  width:726rpx;
  height: 800px;
  background-color: #ddd;
  border-radius: 24rpx;

}
/* API-DEMO page/component/movable-view.acss */
.movable-area {
   
  height: 726rpx;
  width: 800rpx;
  /* margin: 50rpx 0rpx 0 50rpx; */
  background-color: #ccc;
  overflow: hidden;
}

.movable-view {
   
  display: flex;
  /* align-items: center; */
  /* justify-content: center; */
  height: 800rpx;
  width: calc(var(--width)*1rpx);
  /* background: #108ee9; */
  color: #fff;