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

Posted 2021-12-24 liyinsakura

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

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

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

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

 

新建了个组件

wxml

<!--components/playpanel/playpanel.wxml-->
<movable-area style="height:areaHpx;"  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:0px" 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;