Applet into the micro-channel Home automatic pop-up function to achieve red

  Development process need to pop into the red in the home functional requirements, complete the following chart After crunching some.

  Apart from anything else directly on the code.

wxml Code:

<!-- 红包 -->
<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 Code:

/* 红包 */
.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 code:

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

  First written on a page hidden modal box, edited style, onReady triggered when the page is loaded, the hidden modal box pops up. × bind to a hidden mode to frame events on the modal box to receive a red envelope red envelope to bind to jump to the details page.