使用movable-view制作可拖拽的微信小程序弹出层效果。

仿了潮汐睡眠小程序的代码。【如果有侵权联系删除

最近做的项目有个弹出层效果，类似音乐播放器那种。按照普通的做了一般感觉交互不是很优雅，设计妹子把潮汐睡眠的弹层给我看了看，感觉做的挺好，于是乘着有空仿照了一下。

首先善用度娘反编译弄到了源码，但是打不开。然后自己研究源码发现他们用的是movable-view实现的。

于是仿照着搭出了基础框架。

新建了个组件

wxml

<!--components/playpanel/playpanel.wxml-->
<movable-area style="height:{{areaH}}px;"  class="wrapper">
  <movable-view  bindchange="onPresent" bindtouchend="dragPanelEnd" bindtouchstart="dragPanelStart" class="sleep-panel-wrapper" damping="{{40}}" direction="vertical" friction="{{1}}" inertia="{{false}}" outOfBounds="{{false}}" style="padding-top:{{0}}px" x="{{0}}" y="{{sleepPanelPosition}}" class="panel">

  <view class="" bindtap="presentPanel" hover-class="none" hover-stop-propagation="false">
    背景内容
  </view>
  </movable-view>
</movable-area>
<scroll-view scroll-y style="height:400rpx"  class="scroll-w" wx:if="{{showlist}}">
    歌曲列表
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red"  class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
  </scroll-view>

歌曲列表提取出来是因为滚动组件和可拖拽的手势事件会互相影响，如果不需要弹出层有可滚动的区域可以无视。

js部分精简一下就是这样，abcd这些变量名应该是源码做了加密……appjs里还要定义一下初始数据

// components/playpanel/playpanel.js
let d =  getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    areaH:Number
  },

  /**
   * 组件的初始数据
   */
  data: {
    sleepPanelPosition: d.globalData.screenHeight - (d.globalData.isFullScreen ? 24 : 0) - 80 / (375 / d.globalData.screenWidth),
    topPosition: d.globalData.statusBarHeight + d.globalData.navBarHeight,
    bottomPosition: d.globalData.screenHeight - (d.globalData.isFullScreen ? 24 : 0) - 80 / (375 / d.globalData.screenWidth),
    presentProgress: 0,
    disableAnimated: !1,
    showlist:false,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    dragPanelEnd(e) {

      let changedTouches = e.changedTouches;
      let pageY = changedTouches[0].pageY;
      let topPosition = this.data.topPosition;
      let bottomPosition = this.data.bottomPosition;
      let distance = pageY - this.dragOrigin;
      let speed = (bottomPosition - topPosition)/10;

      let h = 0;
      h = this.data.sleepPanelPosition === topPosition ? distance > speed ? bottomPosition : topPosition : distance < -speed ?topPosition : bottomPosition,this.setData({
          sleepPanelPosition: h,
          showlist: h === topPosition
      });

  },
  presentPanel() {
    const {sleepPanelPosition: a, topPosition: b, bottomPosition: c} = this.data;
    this.setData({
        sleepPanelPosition: a === b ? c : b,
    });
    let showList = this.data.sleepPanelPosition === b
    this.setData({
      showlist: showList
    })
},
  dragPanelStart(a) {
    const {changedTouches: b} = a;
    if (b[0]) {
        const {pageY: a} = b[0];
        this.dragOrigin = a;
    }
},
    onPresent({detail: a}) {
      const {y: b} = a, {topPosition: c, bottomPosition: d} = this.data, e = 1 - parseInt(1e3 * ((b - c) / (d - c))) / 1e3;
      e !== this.data.presentProgress && this.setData({
          presentProgress: e
      }), this.data.disableAnimated || this.setData({
          disableAnimated: !0
      }), clearTimeout(this.recoverAnimation), this.recoverAnimation = setTimeout(() => {
          this.setData({
              disableAnimated: !1
          }), this.recoverAnimation = null;
      }, 100);
  },
  }
})

//app.js
```
 onShow() {
    wx.getSystemInfo({
      success: a => {
        const {
          screenHeight: b,
          screenWidth: c,
          statusBarHeight: d
        } = a;
        this.globalData.isFullScreen = parseInt(100 * (c / b)) < parseInt(100 * (9 / 17)),
          this.globalData.isBiggerScreen = 667 < b, this.globalData.statusBarHeight = d, this.globalData.navBarHeight = 44,
          this.globalData.navBarFontSize = 18.5, this.globalData.btnScopeSize = 40, this.globalData.btnSize = 32,
          this.globalData.screenHeight = b, this.globalData.screenWidth = c;
      }
    });
  },
```

wxss部分，主要是.panel不要设置top值，其他好像没啥。

/* components/playpanel/playpanel.wxss */
.wrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 200vh;
    pointer-events:none;
}
.panel {
    width: 100%;
    background: rgba(233, 233, 255, 0.8);
    height: 100vh;
    pointer-events: auto;
}
.scroll-view-item {
    height: 300rpx;
}
.bc_green {
    background: green;
}
.bc_red {
    background: red;
}
.bc_yellow {
    background: yellow;
}
.bc_blue {
    background: blue;
}
.scroll-w {
    position: fixed;
    bottom: 0;
}

原文地址：https://www.cnblogs.com/liyinSakura/p/10985136.html