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

本文详细介绍了一种在微信小程序中实现首页弹出红包功能的方法。通过wxml、wxss和js代码的配合,实现了红包的展示与关闭,以及跳转至领取详情页的功能。

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

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

  二话不说直接上代码。

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% 10
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值