微信小程序进入首页自动弹出红包功能实现

最新推荐文章于 2024-08-04 12:09:11 发布

丿旧时光灬鑫

最新推荐文章于 2024-08-04 12:09:11 发布

阅读量7k

点赞数 4

本文链接：https://blog.csdn.net/qq_40128701/article/details/92123137

版权

开发项目过程中需要在进入首页时弹出红包的功能需求，在捣鼓一番之后完成图如下。

二话不说直接上代码。

wxml代码：

<!-- 红包 -->
<view class="cu-modal {{modalName=='Image'?'show':''}}">
  <view class="cu-dialog">
    <view class="bg-imgs" style="background-image: url('https://6861-haoai-hnpmh-1259368460.tcb.qcloud.la/img/index/%E7%BA%A2%E5%8C%85.png?sign=c4bbd4b057995ebb07d31a85860c7d62&t=1560582751');">
      <view class="cu-bar justify-end text-white">
        <view class="action xx" bindtap="hideModal">
          <text class="cuIcon-close"></text>
        </view>
      </view>
    </view>
  </view>
</view>

wxss代码：

/* 红包 */
.bg-imgs{
  height: 350px;
  background-repeat: no-repeat; 
  background-size: 100% 100%;
}
.hb-text{
  padding-top: 10px;
  color: red;
}

 .xx{
   float: right;
   padding-right: 15px;
   color:white;
 } 
.cu-modal.show {
	opacity: 1;
	transition-duration: 0.3s;
	-ms-transform: scale(1);
	transform: scale(1);
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: auto;
}

.cu-dialog {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	width: 300px;
	max-width: 100%;
	border-radius: 10rpx;
	overflow: hidden;
}

js代码：

// 弹出红包
  onReady() {
    this.showModal()
  },
  showModal() {
    this.setData({
      modalName: 'Image'
    })
  },
  hideModal(e) {
    this.setData({
      modalName: null
    })
  },

首先在页面上写一个隐藏的模态框，编辑好样式，当页面加载时触发onReady，使隐藏的模态框弹出。给模态框上给个×绑定隐藏模态框事件，给红包绑定跳转到领取红包详情页面。