用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2

主题

2

帖子

193

积分

架构狮

Rank: 3Rank: 3

积分
193
2017-1-11 21:57:42 czj686001开发者认证 架构狮 楼主 551749

wx-drawer.gif

代码示例:
[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})
    }
  }
})


项目地址及下载:https://github.com/zhongjie-chen/wx-drawer
wx-drawer-master.zip (38.35 KB, 下载次数: 98)

评分

参与人数 2原创 +2 浮云 +40 收起 理由
jsh5css + 1 + 20 很给力!
天下雪 + 1 + 20 赞一个!

查看全部评分

今天还有人问有没有更好的侧滑组件,楼主就制作了一个@easy868
另外我看到楼主所属公司,似乎是一个外包团队?
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
666学习学习
henhao
非常好
2017-1-12 09:28:42 zsc829 攻城狮
6#
学习,才能装逼
2017-1-12 09:36:54 easy868开发者认证 诠释者
8#
学习学习,感谢
很好,值得学习!
想知道动图是咋做的
天下雪 发表于 2017-1-11 22:02
今天还有人问有没有更好的侧滑组件,楼主就制作了一个@easy868
另外我看到楼主所属公 ...

感谢@,正好用得上
2017-1-12 12:20:46 erheng 架构狮
12#
楼主强大
学习学习
2017-1-12 16:01:55 zcwl 架构狮
14#
新行行行行行行
请问有卡顿如何解决?@czj686001
1234下一页
发新帖
您需要登录后才可以回帖 登录 | 立即注册