uni-app【插屏弹窗】动态生成

最新推荐文章于 2025-06-28 19:24:00 发布

原创最新推荐文章于 2025-06-28 19:24:00 发布 · 6.2k 阅读

3 ·

CC 4.0 BY-SA版权

总结专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在uni-app中使用v-for循环动态生成多个弹窗，并通过数组和自定义方法实现弹窗的精确控制与关闭。文章详细展示了如何绑定事件处理函数，通过传入的参数来关闭特定的弹窗。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先引用了template/sbanner组件，现在想实现根据接口返回的数据动态生成多个弹窗，一开始遇到的主要问题是关闭时this赋值的问题，后来想到用数组可以解决

<view v-for="(value,key) in banner" :key="key">
  <!-- 弹出层 -->
  <view class="uni-banner" style="background:#FFFFFF;" v-if="value.bannerShow">
    <view style="justify-content:flex-end;" @tap="closeBanner" :data-bannerindex="key">
      <view style="justify-content:flex-end; text-align:right; padding:20upx;">
        <text class="uni-icon uni-icon-close"></text>
      </view>
    </view>
    <view>
      <image :src="value.img" style="width:100%;" mode="widthFix"></image>
    </view>
    <view style="padding:50upx 0; padding-bottom:68upx;">
      <button type='warn' class="mini-btn" style="background:#F6644D; margin:0 80upx;">一个按钮</button>
    </view>
  </view>
  <view class="uni-mask" v-if="value.bannerShow"></view>
</view>

这里循环banner数组，定义的banner数组如下

 banner: [{
   bannerShow: false,
   img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
 }, {
   bannerShow: true,
   img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
 }, {
   bannerShow: true,
   img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
 }],

methods中的关闭方法，通过与:data-bannerindex=“key” 关联，可以关闭指定的弹窗

methods: {
  closeBanner: function(e) {
    var bannerindex = e.currentTarget.dataset.bannerindex;
    console.log(bannerindex);
    this.banner[bannerindex].bannerShow = false;
  }
}

弹出层的样式

/* 遮罩层 */
.uni-mask {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}

/* 弹出层形式的广告 */
.uni-banner {
  width: 70%;
  position: fixed;
  left: 50%;
  top: 50%;
  background: #FFF;
  border-radius: 10upx;
  z-index: 99;
  transform: translate(-50%, -50%);
}