#笔记#微信小程序底部弹出框

最新推荐文章于 2024-06-26 11:36:26 发布

番薯仔

最新推荐文章于 2024-06-26 11:36:26 发布

阅读量3k

点赞数 1

分类专栏：个人笔记文章标签： js html javascript 小程序

本文链接：https://blog.csdn.net/m0_46526358/article/details/113996673

版权

本文记录了在微信小程序中实现点击事件触发底部弹出框显示详细信息的过程。遇到的问题是点击任一测试块时，弹出框显示的是最后一个测试块的信息。解决方案是创建数据列表，通过bindtap事件传递参数，将点击的测试块信息绑定到新列表，并在弹出框中展示。

摘要由CSDN通过智能技术生成

点击事件之后，从底部弹出一个新的框显示详细信息，大致效果如下：
在这里插入图片描述

当点击某个测试块时，要实现从底部弹出一个新的页面显示该测试的具体信息

页面主要代码部分

<!--屏幕背景变暗的背景  -->
<view class="commodity_screen" bindtap="hideModal" wx:if="{
    {showModalStatus}}"></view>
<!--弹出框  -->
<scroll-view scroll-y="true" style="height:100vh;"
    <block wx:for="{
    {data}}" wx:key="index">
      <!--该部分循环展示测试块-->
    </block>
    <view animation="{
    {animationData}}