用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    郁闷
    2017-6-29 17:34
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    77

    主题

    103

    帖子

    10万

    金钱

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    108

    优秀版主

    2017-1-12 16:03:35 cyk 管理员 楼主 5767
    本帖最后由 cyk 于 2017-1-12 16:52 编辑

    微信小程序实用插件:模仿QQ6.0侧滑菜单
    215729mg488ohgo3cdhou3.jpg

    代码示例:
    [mw_shl_code=applescript,true]//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[0];
        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[0];
        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[0];
        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})
        }
      }
    })[/mw_shl_code]

    附件下载
    游客,如果您要查看本帖隐藏内容请回复

    啥也不说了,感谢楼主分享哇!
    666666666666666
    不知能否移植到打包生成的代码里
    怎嘛用,求讲解
    啥也不说了,感谢楼主分享哇!
    发新帖
    *滑动验证:
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X