E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

仿了潮汐睡眠小程序的代码。【如果有侵权联系删除最近做的项目有个弹出层效果,类似音乐播放器那种。按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照了一下。首先善用度娘反编译弄到了源码,但是打不开。然后自己研究源码发现他们用的是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-areascroll-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.jslet 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;}

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 使用movableview制作可拖拽的微信小程序弹出层效果。
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏