2024年5月3日发(作者：)

30 }

31 }

32 return me;

33 },

34 _bindEventListener: function(){

35 var me = this,

36 $nav = me._nav,

37 $main = me._main,

38 $container = me._container,

39 direction = me._dir,

40 position = {x : 0, y : 0},

41 navWidth = $(),

42 transition = me._transition;

43

44 $('data-'+direction, '0');

45 $('touchstart', function(e){

46 var target = (0);

47

48 $('-webkit-transition', 'none');

49 position.x = X;

50 position.y = Y;

51

52 return false;

53 }).on('touchmove', function(e){

54 var target = (0),

55 different = X - position.x,

56 distant = parseInt($('data-'+direction)||0, 10);

57

58 //滑动距离太短,则不处理

59 if((different) >= 5){

60 distant += different;

61 if(direction === 'left'){

62 //左侧菜单栏

63 if(distant <= 0){

64 distant = 0;

65 }

66 if(distant >= navWidth){

67 distant = navWidth;

68 }

69 }else{

70 //右侧菜单栏

71 if(distant >= 0){

72 distant = 0;

73 }

74 if(distant <= -navWidth){

75 distant = -navWidth;

76 }

77 }

78 $main

79 .attr('data-'+direction, distant)

80 .css('-webkit-transform', 'translate(' + distant + 'px,0)');

81 }

82 position.x = X;

83 position.y = Y;

84 return false;

85 }).on('touchend', function(e){

86 var distant = parseInt($('data-'+direction), 10);

87 if(direction === 'left'){

88 distant = distant > navWidth/2 ? navWidth : 0;

89 }else{

90 distant = distant > -navWidth/2 ? 0 : -navWidth;

91 }

92 $({

93 '-webkit-transform': 'translate(' + distant + 'px,0)',

94 '-webkit-transition': transition

95 }).attr('data-'+direction, distant);

96 return false;

97 });

98 return me;

99 }

100 };

101 = Drawer;

102 })(Zepto, this);

View Code

初始化代码:

1 new Drawer({

2 dir: 'right',//菜单位于右边,默认值为左边,根据实际需要设置

3 container: $container,//总容器

4 nav: $en('.left'),//菜单栏