微信小程序首页轮播图弹窗(1)

代码如下:
js:

// index.js
Page({
    data:{
        push:[],
        showAd:true
    },
    // 请求接口
getList:function () {
    var that=this;
    wx.request({
        // 接口
     url: app.globalData.URL+'api/activity/list',
     method:"POST",
     data:{},
     success: function success(res) {
         if(res.data.rows.length>0){
          that.setData({
              push: res.data.rows,
              showAd: false
            })
         }
      
     },fail: function fail(error) {
       console.log(error,'失败')
     }
   })
  },
//   请求接口
  onLoad:function(){
    var that = this;
    that.getList()
  },
  //    点击隐藏弹出蒙版
  hiddenMsak() {
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: "linear",
      delay: 0
    })
    // 点击取消广告
    setTimeout(function () {
      this.setData({
        showAd: true
      })
    }.bind(this))
  },
})

wxml:

<view class="mask" hidden="{{showAd}}">
    <view class="AdView-mask" animation="{{animationData}}">
    <view class="mask-sitelist">
    <view class="mask-serchCon">
      <view class="bannerwrap">
        <!-- 轮播图和上下文字 -->
      <swiper indicator-dots="{{indicatorDots}}" wx:if="{{push}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="#fff" indicator-active-color="#eb6623" class="mask-swiper" style="width: 680rpx; height: 690rpx; display: block; box-sizing: border-box">
        <block wx:for="{{push}}" wx:key="index">
            <navigator url="/pages/activitydetail/activitydetail?activityId=+{{push[index].activityId}}">
          <swiper-item>
            <view class="mask-title">
      <rich-text nodes="{{push[index].activityName}}"></rich-text>
    </view>
            <image  src="{{push[index].img}}"  bindtap="toDetailList" class="mask-image"/>
            <view class="mask-text">
       <rich-text nodes="{{push[index].activityContent}}"></rich-text>
      </view>
          </swiper-item>
            </navigator>
        </block>
      </swiper>
       
    </view>
    </view>
    </view>
    <!-- 取消弹窗图片 -->
            <image class="close-mask" bindtap="hiddenMsak" src="/image/cross.png"></image>
        </view>
    </view>

wxss:

/* 杨琛弹窗 */
.mask {
    background: rgba(0, 0, 0, 0.4);
    bottom: 0; left: 0rpx; top: 0rpx;
    z-index: 99998;
    position: fixed; left: 0rpx; top: -2rpx;
    text-align: center;
  }
  mask-swiper{
      width: 680rpx; height: 690rpx; display: block; box-sizing: border-box;
  }
  .mask .AdView-mask {
    position: relative;
      width: 100%;
      height: 100%; 
       margin: 120rpx;
        left: -86rpx; top: 154rpx
  }
  .mask-sitelist{
      margin-top: 16rpx;
      /* height: calc( 100vh - 104rpx); */
      height: calc( 100vh - 243rpx);
      overflow-y: scroll;
      padding-bottom: 136rpx;
      width: 960rpx; height: 1050rpx; display: block; box-sizing: border-box;
      border-bottom: 20rpx;
  }
  .mask-image{
      height: 276rpx;
      border-radius: 15rpx;   
      width: 676rpx; height: 276rpx; display: inline-block; box-sizing: border-box
      
    }
  .mask-serchCon{
      background-image: linear-gradient(160deg, #ff0064 20%,#ca00ff 80%);
   border-radius: 15rpx;
   width: 680rpx; height: 680rpx; display: block; box-sizing: border-box;
   
  }
  .mask-title{
      font-size: 45rpx;
      margin-bottom: 20rpx;
      color: #ffffff;
      margin-top: 40rpx;
      font-weight:bolder;
  }
  .mask-text{
      font-size: 30rpx;
      margin-top: 0px;
      color: #ffffff;
      line-height:50rpx; margin-top: 40rpx;
  }
  /* 取消叉号 */
  .mask .AdView-mask .close-mask {
    position: absolute;
    width: 80rpx;
    height: 80rpx;
    bottom: 0;
   left: 300rpx; top: 700rpx
   
  }