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

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

  
  
    
      
        
      
    
    
      
    
    
      一个按钮
    
  
  

这里循环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%);
}