用户
 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

  • TA的每日心情
    无聊
    2016-12-22 14:54
  • 签到天数: 2 天

    [LV.1]初来乍到

    59

    主题

    67

    帖子

    72

    积分

    超级版主

    Rank: 8Rank: 8

    积分
    72
    发表于 2017-1-12 16:03:35

    你现在是游客身份浏览,注册可以更方便哦!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

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

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

    代码示例:
    [AppleScript] 纯文本查看 复制代码
    //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})
        }
      }
    })


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




    上一篇:我发现这个小程序系统好棒,咱们应该建个QQ或者微信群啊...
    下一篇:微信小程序框架脑图全解,一眼看清框架构造
    发表于 2017-1-13 16:31:03
    啥也不说了,感谢楼主分享哇!
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册