cyk 发表于 2017-1-12 16:03:35

微信小程序实用插件：模仿QQ6.0侧滑菜单

本帖最后由 cyk 于 2017-1-12 16:52 编辑

微信小程序实用插件：模仿QQ6.0侧滑菜单


代码示例：
//wx-drawer
const MENU_WIDTH_SCALE = 0.82;
const FAST_SPEED_SECOND = 300;
const FAST_SPEED_DISTANCE = 5;
const FAST_SPEED_EFF_Y = 50;
var app = getApp()
Page({
data: {
    ui: {
      windowWidth: 0,
      menuWidth: 0,
      offsetLeft: 0,
      tStart: true
    }
},
onLoad() {
    try {
      let res = wx.getSystemInfoSync()
      this.windowWidth = res.windowWidth;
      this.data.ui.menuWidth = this.windowWidth * MENU_WIDTH_SCALE;
      this.data.ui.offsetLeft = 0;
      this.data.ui.windowWidth = res.windowWidth;
      this.setData({ui: this.data.ui})
    } catch (e) {
    }
},
handlerStart(e) {
    let {clientX, clientY} = e.touches;
    this.tapStartX = clientX;
    this.tapStartY = clientY;
    this.tapStartTime = e.timeStamp;
    this.startX = clientX;
    this.data.ui.tStart = true;
    this.setData({ui: this.data.ui})
},
handlerMove(e) {
    let {clientX} = e.touches;
    let {ui} = this.data;
    let offsetX = this.startX - clientX;
    this.startX = clientX;
    ui.offsetLeft -= offsetX;
    if(ui.offsetLeft <= 0) {
      ui.offsetLeft = 0;
    } else if(ui.offsetLeft >= ui.menuWidth) {
      ui.offsetLeft = ui.menuWidth;
    }
    this.setData({ui: ui})
},
handlerCancel(e) {
    // console.log(e);
},
handlerEnd(e) {
    this.data.ui.tStart = false;
    this.setData({ui: this.data.ui})
    let {ui} = this.data;
    let {clientX, clientY} = e.changedTouches;
    let endTime = e.timeStamp;
    //快速滑动
    if(endTime - this.tapStartTime <= FAST_SPEED_SECOND) {
      //向左
      if(this.tapStartX - clientX > FAST_SPEED_DISTANCE) {
      ui.offsetLeft = 0;
      } else if(this.tapStartX - clientX < -FAST_SPEED_DISTANCE && Math.abs(this.tapStartY - clientY) < FAST_SPEED_EFF_Y) {
      ui.offsetLeft = ui.menuWidth;
      } else {
      if(ui.offsetLeft >= ui.menuWidth/2){
          ui.offsetLeft = ui.menuWidth;
      } else {
          ui.offsetLeft = 0;
      }
      }
    } else {
      if(ui.offsetLeft >= ui.menuWidth/2){
      ui.offsetLeft = ui.menuWidth;
      } else {
      ui.offsetLeft = 0;
      }
    }
    this.setData({ui: ui})
},
handlerPageTap(e) {
    let {ui} = this.data;
    if(ui.offsetLeft != 0) {
      ui.offsetLeft = 0;
      this.setData({ui: ui})
    }
},
handlerAvatarTap(e) {
    let {ui} = this.data;
    if(ui.offsetLeft == 0) {
      ui.offsetLeft = ui.menuWidth;
      this.setData({ui: ui})
    }
}
})

附件下载
**** Hidden Message *****

saintfen 发表于 2017-1-13 16:31:03

啥也不说了，感谢楼主分享哇！

柳州吴彦祖 发表于 2017-9-9 15:37:01

666666666666666

苏州市大运装饰工程有限公司 发表于 2017-9-9 16:52:29

不知能否移植到打包生成的代码里

勿忘心安 发表于 2017-9-11 10:20:36

怎嘛用，求讲解:(

深圳市绿联科技有限公司 发表于 2017-9-24 14:50:29

啥也不说了，感谢楼主分享哇！

jack369 发表于 2020-4-15 11:55:48

专注于与个人游戏开发者合作，有产品的朋友联系微信号jim20180688，详聊

jackjack417 发表于 2020-4-17 15:33:01

我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微信号jim20180688，详聊
页: [1]
查看完整版本: 微信小程序实用插件：模仿QQ6.0侧滑菜单