E企盈营销工具技术服务商 热线:4006-838-530

微信小程序进入首德保县E企盈小程序页自动弹出红包功能实现

开发项目过程中需要在进入首页时弹出红包的功能需求,在捣鼓一番之后完成图如下。  二话不说直接上代码。wxml代码:<!-- 红包 --><view class="cu-modal {{modalName=='Image'?'show'开通色卡专拍小程序电话:4006-838-530:''}}">  <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>开通睡袋小程序电话:4006-838-530;      </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;m开通3-5万小程序电话:4006-838-530argin-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,使隐藏的模态框弹出。给模态框上给个×绑定隐藏模态框事件,给红包绑定跳转到领取红包详情页面。微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序进入首德保县E企盈小程序页自动弹出红包功能实现
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

模王系统开发

联系我们升级日志

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏