小程序中实现折叠菜单效果的实例代码展示

why 459 2024-08-07

本篇文章给大家带来的内容是关于小程序实例：小程序实现折叠菜单的效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

通常，菜单都有一级菜单二级、三级菜单之分，我们知道前端js的dom操作可以很好的控制二级菜单的显示与隐藏，当然今天我就不介绍web端的菜单折叠效果。我今天呢，是来学习学习小程序中该如何实现点击一级菜单显示/隐藏二级菜单，并且在点击一个菜单显示之外，要实现其他菜单隐藏。

实现效果如下：

代码如下：

   .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

<view class="cells">

    <view class="item"  wx:for="{{List}}" wx:for-index="idx" wx:for-item="item" wx:key="idx">

        <view bindtap="isOpen" class="cdn" data-index="{{item.id}}">

            <view>

                <image class="img" src="{{item.iamges}}" mode="aspectFill"/><text class="content">{{item.cont}}</text>

            </view>

            <view>

                <text class="discount">{{item.discount}}</text><image class="icon_img" src="{{item.hidden ? &#39;/assets/icon_down2x.png&#39; : &#39;/assets/icon_up2x.png&#39;}}" mode="aspectFill"/>

            </view>

        </view>

        <view hidden="{{item.hiddena}}"  class="hidden">

            <block wx:for="{{item.invalidActivty}}"  wx:for-index="index" wx:for-item="items" wx:key="index">

                <view class="buys">

                    <view class="v1 ">

                        <navigator><text class="new-price">{{items.price}}</text><text class="oldPrice">{{items.oldPrice}}</text></navigator>

                        <navigator><text class="buy">{{items.validType}}</text><text style="font-size: 24rpx;margin-left: 20rpx;color: #6C6C6C">{{items.validTime}}</text></navigator>

                    </view>

                    <view  class="shopping">

                        <text>购买</text>

                    </view>

                </view>

            </block>

        </view>

    </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

page{

    background: #fff;

}

.swiper-img{

    width: 750rpx;

    height: 300rpx;

}

.cells .item .cdn{

    position: relative;

    box-sizing:border-box;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20rpx 30rpx;

    /*border-bottom: 1rpx solid #f0f0f0;*/

    background-color: #fff;

    font-size: 32rpx;

}

.cells .item .cdn::after{

    content:&#39;&#39;;position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border-bottom:0 solid #f0f0f0;border-width:1px

}

 

.img{

    height: 44rpx;

    width: 44rpx;

    vertical-align: middle;

    display: inline-block;

    line-height: 82rpx;

}

 

.icon_img{

    height:12rpx;

    width:20rpx;

}

 

 

 

.content{

    margin-left: 15rpx;

    line-height: 82rpx;

    vertical-align: middle;

}

 

.discount{

    line-height: 82rpx;

    vertical-align: middle;

    color:orange;

    box-sizing: border-box;

    padding-right: 20rpx;

}

 

 

.video-item{

    display: flex;

    flex-direction: column;

}

.buys{

    width:750rpx;

    height: 141.6rpx;

    position: relative;

    box-sizing: border-box;

    padding: 20rpx 30rpx;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

    background-color:#FAFAFA;

}

.buys::after {

    content:&#39;&#39;;position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;

    border-bottom:0 solid #DCDCDC;border-width:1px;

}

.v1{

    width: 35%;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

}

 

.new-price{

    font-size: 32rpx;

    color: #3B3B3B;

}

.oldPrice{

    text-decoration:line-through;

    font-size: 24rpx;

    color: #B0B0B0;

    margin-left: 20rpx;

}

.buy{

    font-size: 24rpx;

    color: #2DAF73;

    text-align: center;

    width: 80rpx;

    height: 40rpx;

    line-height: 40rpx;

    display: inline-block;

    position: relative;

    box-sizing: border-box;

}

.buy::after{

    content:&#39;&#39;;position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #2DAF73;border-width:1px;border-radius:8rpx

}

 

.shopping{

    width: 128rpx;

    height: 56rpx;

    line-height: 56rpx;

    position: relative;

    box-sizing: border-box;

    font-size: 28rpx;

    color: #2DAF73;

    text-align: center;

}

.shopping::after{

    content:&#39;&#39;;position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #2DAF73;border-width:1px;border-radius:16rpx

}

.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

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

data: {

    memberList:[

        {iamges:"/assets/logo_aiqiyi2x.png",

          cont:"爱奇艺影视会员",

          discount:"7.5折",

          hiddena:true,

          id:"0",

          invalidActivty:[

            {

              price:"2.98元",

              oldPrice:"3元",

              validType:"周卡",

              validTime:&#39;7天有效&#39;

            },

            {

                price:"18.98元",

                oldPrice:"25元",

                validType:"月卡",

                validTime:&#39;30天有效&#39;

            },

          ]

        },

        {iamges:"/assets/logo_tengxun2x.png",

            cont:"腾讯视频会员",

            discount:"7折",

            hiddena:true,

            id:"1",

            invalidActivty:[

                {

                    price:"2.98元",

                    oldPrice:"3元",

                    validType:"周卡",

                    validTime:&#39;7天有效&#39;

                },

                {

                    price:"18.98元",

                    oldPrice:"25元",

                    validType:"月卡",

                    validTime:&#39;30天有效&#39;

                },

            ]

        },

        {iamges:"/assets/logo_youku2x.png",

            cont:"优酷视频黄金会员",

            discount:"8折",

            hiddena:true,

            id:"2",

            invalidActivty:[

                {

                    price:"2.98元",

                    oldPrice:"3元",

                    validType:"周卡",

                    validTime:&#39;7天有效&#39;

                },

                {

                    price:"18.98元",

                    oldPrice:"25元",

                    validType:"月卡",

                    validTime:&#39;30天有效&#39;

                },

            ]

        },

        {iamges:"/assets/logo_sohu2x.png",

            cont:"搜狐视频黄金会员",

            discount:"8折",

            hiddena:true,

            id:"3",

            invalidActivty:[

                {

                    price:"2.98元",

                    oldPrice:"3元",

                    validType:"周卡",

                    validTime:&#39;7天有效&#39;

                },

                {

                    price:"18.98元",

                    oldPrice:"25元",

                    validType:"月卡",

                    validTime:&#39;30天有效&#39;

                },

            ]

        },

    ]

  },

  isOpen:function(e){

      var that = this;

      var idx = e.currentTarget.dataset.index;

      console.log(idx);

      var memberList = that.data.MemberList;

      console.log(memberList);

      for (let i=0; i < memberList.length; i++){

          if (idx == i) {

              memberList[i].hidden=!memberList[i].hidden;

          } else {

             memberList[i].hidden=true;

          }

      }

      this.setData({MemberList:memberList});

      return true;

    },

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

标签：程序 代码 实例 小程序 学习
上一篇:微信小程序中实现下拉刷新数据的实例代码呈现
下一篇:小程序与后台交互的实现方式及附带代码
相关文章

 发表评论

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