1、写一个两个按钮
2、给两个按钮加动画的样式
3、写方法控制两个按钮的显示
<button class="more-button" bindtap="toggleMoreOptions">更多</button><!-- 按钮列表容器,初始状态设置为隐藏 -->
<view class="options-container" wx:if="{{showOptions}}"><!-- 按钮列表项 --><button>选项1</button><button>选项2</button><!-- ... 其他按钮列表项 ... -->
</view>
.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);}
}
Page({data: {showOptions: false // 初始状态下,按钮列表容器是隐藏的},toggleMoreOptions: function () {this.setData({showOptions: !this.data.showOptions // 切换按钮列表容器的显示状态});}
});