小程序点击更多上拉显示选项

1、写一个两个按钮
2、给两个按钮加动画的样式
3、写方法控制两个按钮的显示

更多



  
  选项1
  选项2
  

1
2
3
4
5
6
7
8
9

.more-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #007AFF;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
}

.options-container {
  position: fixed;
  bottom: 80px; /* 距离底部的距离，可以根据需要调整 */
  right: 20px; /* 距离右侧的距离，可以根据需要调整 */
  background-color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  animation: slide-up 0.3s ease-out; /* 上拉动画效果 */
}

@keyframes slide-up {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

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

Page({
  data: {
    showOptions: false // 初始状态下，按钮列表容器是隐藏的
  },
  toggleMoreOptions: function () {
    this.setData({
      showOptions: !this.data.showOptions // 切换按钮列表容器的显示状态
    });
  }
});

1
2
3
4
5
6
7
8
9
10
11