微信小程序中弹出菜单功能的实现方式与要点

why 110 2024-08-23

最近做项目需要这样的需求，当用户点击标签栏按钮，向下弹出菜单，再次点击，收回菜单。接下来通过本文给大家介绍微信小程序实现弹出菜单功能，感兴趣的朋友一起看看吧

需求

点击标签栏按钮，向下弹出菜单，再次点击，收回菜单

要解决的问题

  1. 标签栏三栏样式，标签栏固定不动；

  2. 点击标签栏弹出菜单，并且出现透明遮罩；

  3. 遮罩优先级在弹出框之下；

  4. 弹出框内标签的设置；

  5. 滚动栏滚动条的隐藏

如何解决？

  1. 弹性布局，横向，三者平分整栏;

  2. 状态监听点击事件，数据控制hide或者show,通过rgba设置透明度

  3. 弹出框设置z-index；

  4. 弹性布局flex 横向排列 超出后wrap 然后space-around控制间距


1

2

3

4

5

::-webkit-scrollbar {

width: 0;

height: 0;

color: transparent;

}


具体实现

wxml


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

<import src="../../templates/template" />

<view class="container {{isMask?&#39;mask&#39;:&#39;&#39;}}">

  <view class="header">

    <view class="filterCity {{status==&#39;1&#39; && isActive?&#39;active&#39;:&#39;&#39;}}" data-status=&#39;1&#39; bindtap="changeStatus">

      <view class="city">城市筛选</view>

      <image src="{{status==&#39;1&#39; && isActive?&#39;../../youzan-image/red-up.png&#39;:&#39;../../youzan-image/down.png&#39;}}" />

    </view>

    <view class="filterJob {{status==&#39;2&#39; && isActive?&#39;active&#39;:&#39;&#39;}}" data-status=&#39;2&#39; bindtap="changeStatus">

      <view class="job">职位筛选</view>

      <image src="{{status==&#39;2&#39; && isActive?&#39;../../youzan-image/red-up.png&#39;:&#39;../../youzan-image/down.png&#39;}}" />

    </view>

    <view class="filterOrder {{status==&#39;3&#39;&& isActive?&#39;active&#39;:&#39;&#39;}}" data-status=&#39;3&#39; bindtap="changeStatus">

      <view class="order">排序方式</view>

      <image src="{{status==&#39;3&#39; && isActive?&#39;../../youzan-image/red-up.png&#39;:&#39;../../youzan-image/down.png&#39;}}" />

    </view>

  </view>

  <block wx:if="{{isActive==true&&status==&#39;1&#39;}}">

    <view class="cityContainer">

      <block wx:for="{{city}}" wx:key="id" wx:for-index="index">

        <view class="city {{isSelect&&index==curIndex?&#39;select&#39;:&#39;&#39;}}" data-index="{{index}}" bindtap="select">{{item}}</view>

      </block>

    </view>

  </block>

  <block wx:if="{{isActive==true&&status==&#39;2&#39;}}">

    <scroll-view scroll-y="true" class="posContainer">

      <block wx:for="{{cur}}" data-index=&#39;index&#39; wx:for-index=&#39;index&#39; wx:key="index">

        <view class="title">{{item.title}}</view>

        <view class="poscontent">

          <view wx:for="{{item.types}}" wx:for-item="type" wx:key=&#39;id&#39; wx:for-index="{{index}}" data-index="{{index}}">

            <view class="tag {{isSelect&&index==curIndex?&#39;select&#39;:&#39;&#39;}}" data-id="{{id}}" bindtap="multiSelect">{{type}}</view>

          </view>

        </view>

      </block>

      <view class="confirm">

        <button class="weui-btn" type="warn">确认</button>

      </view>

    </scroll-view>

  </block>

  <block wx:if="{{isActive==true&&status==&#39;3&#39;}}">

    <view class="orderContainer">

      <view class="block">智能排序</view>

      <view class="block">时间排序</view>

      <view class="block">薪资排序</view>

    </view>

  </block>

  <view class="listContainer" >

    <view wx:for="{{jobList}}" wx:key="index" data-index="{{index}}">

      <template is="list-item" data="{{...item}}" />

    </view>

  </view>

  <view class="search " bindtap="search">

    <image src="../../youzan-image/search.png" />

    <text>搜索</text>

  </view>

</view>


wxss


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

page {

  position: relative;

  width: 100%;

  height: 100vh;

}

 

.header {

  width: 100%;

  height: 80rpx;

  position: fixed;

  top: 0;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  text-align: center;

  color: #313131;

  font-size: 16px;

  border-bottom: 1rpx solid #eeeeee;

  z-index: 9999;

  background-color: #fff;

}

 

.filterCity {

  flex: 1;

  position: relative;

  height: 80rpx;

  line-height: 80rpx;

}

 

.filterJob {

  position: relative;

  flex: 1;

  height: 80rpx;

  line-height: 80rpx;

}

 

.filterOrder {

  position: relative;

  flex: 1;

  height: 80rpx;

  line-height: 80rpx;

}

 

.header image {

  position: absolute;

  right: 15rpx;

  top: 26rpx;

  width: 30rpx;

  height: 30rpx;

}

 

.active {

  color: #ef0001;

}

 

.mask {

  width: 100%;

  height: 100%;

  position: fixed;

  top: 80rpx;

  background-color: rgba(15, 15, 26, 0.3);

}

 

.cityContainer {

  display: flex;

  flex-direction: row;

  justify-content: space-around;

  align-items: space-between;

  flex-wrap: wrap;

  width: 100%;

  height: 300rpx;

  z-index: 999;

  background-color: #fff;

  border-bottom: 1rpx solid #e9e9e9;

  padding-bottom: 130rpx;

}

 

.cityContainer .city {

  display: block;

  font-size: 15px;

  margin-top: 100rpx;

  width: 150rpx;

  height: 50rpx;

  line-height: 50rpx;

  text-align: center;

  border: 1rpx solid #e9e9e9;

  overflow: hidden;

}

.select {

  color: #ffffff;

  background-color: #ed0000;

}

.posContainer {

  height: 980rpx;

  width: 100%;

  background-color: #fff;

  /* overflow:auto; */

}

::-webkit-scrollbar {

  width: 0;

  height: 0;

  color: transparent;

}

.title {

  margin-top: 55rpx;

  font-size: 15px;

  margin-left: 28rpx;

}

.poscontent {

  width: 100%;

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  flex-wrap: wrap;

  margin-top: -15rpx;

}

.tag {

  margin-left: 28rpx;

  margin-top: 23rpx;

  font-size: 13px;

  width: 150rpx;

  height: 50rpx;

  line-height: 50rpx;

  text-align: center;

  border: 1rpx solid #e9e9e9;

}

.confirm {

  width: 100%;

  height: 150rpx;

  border: 1rpx solid transparent;

  background-color: #fff;

}

.weui-btn {

  position: fixed;

  width: 95%;

  bottom: 52rpx;

  left: 50%;

  transform: translateX(-50%);

}

.orderContainer {

  display: flex;

  flex-direction: row;

  justify-content: space-around;

  align-items: center;

  background-color: #fff;

  width: 100%;

  height: 125rpx;

}

.block {

  font-size: 13px;

  width: 200rpx;

  height: 50rpx;

  line-height: 50rpx;

  text-align: center;

  border: 1rpx solid #e9e9e9;

}

.search {

  position: fixed;

  bottom: 80rpx;

  background-color: #fff;

  right: 25rpx;

  width: 150rpx;

  height: 75rpx;

  line-height: 75rpx;

  text-align: center;

  border-radius: 35rpx;

  box-shadow: 1rpx 1rpx 7rpx 7rpx #f5f5f5;

}

.search image {

  width: 30rpx;

  height: 30rpx;

}

.search text {

  font-size: 15px;

  padding-left: 9rpx;

  color: #666666;

}

.listContainer {

  width: 100%;

  height: 100%;

  margin-top: 80rpx;

}


js


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

import category from &#39;../../api/employ&#39;

import jobList from &#39;../../api/detail&#39;

Page({

 data: {

  curIndex: &#39;&#39;,

  isActive: false,

  jobList:[],

  cur: [],

  job: [],

  isShow: true,

  status: 0,

  isMask: false,

  isSelect: false,

  city: [&#39;全国&#39;, &#39;杭州&#39;, &#39;北京&#39;, &#39;深圳&#39;, &#39;上海&#39;, &#39;广州&#39;, &#39;武汉&#39;, &#39;重庆&#39;]

 },

 changeStatus(e) {

  let status = e.currentTarget.dataset.status;

  let cur = category;

  this.setData({

   isActive: !this.data.isActive,

   status: status,

   isMask: !this.data.isMask,

   cur: cur,

  })

 },

 select(e) {

  let curIndex = e.currentTarget.dataset.index;

  this.setData({

   isSelect: " curIndex == this.data.curIndex ? &#39;!this.data.isActive&#39; : &#39;true&#39; ",

   isActive: false,

   isMask:false,

   curIndex: curIndex,

  })

 },

 multiSelect(e){

  let multiIndex=e.currentTarget.dataset.index;

  this.setData({

   isSelect:!this.data.isSelect,

   curIndex:multiIndex

  })

 },

 search(e) {

  wx.navigateTo({

   url: &#39;../search/search&#39;,

  })

 },

 onLoad: function (e) {

  this.setData({

   jobList:jobList

  })

 },

 click:function (e) {

  let id =e.currentTarget.dataset.id;

  wx.navigateTo({

   url: `../detail/detail?id=${id}`,

  })

 }

})


以上就是本文的全部内容，希望对大家的学习有所帮助。


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 js 学习
上一篇:微信小程序中联网请求实现轮播图的相关要点
下一篇:微信小程序图表插件wx-charts的详细功能介绍
相关文章

 发表评论

暂时没有评论，来抢沙发吧~