小程序封装自定义弹窗

首先呢，我们可以发现加入需要移动端类型的自定义弹窗，小程序是没有提供的

先给大家看看效果图

----------首先声明作品出处，只是本人对出处的东西写的更大白话

效果图：

制作步骤：

1.创建文件夹

 

2.文件内容：

2.1 .template.wxss

.toast-out {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #999999;
  display: flex;
  flex-direction: column;
  align-items: center;
 justify-content: center;
}
.toast-out .toast-in {
  width: 610rpx;
  padding: 6rpx;
  text-align: center;
  color: white;
  border-radius: 8rpx;
  background:#ffffff;
  flex-direction: column;
  align-items: center;
 justify-content: center;
}
.toast-out .toast-in span {
  font-size: 30rpx;
}
.toast-out .toast-in .toast-txt {
  font-size: 24rpx;
  color: #6b6c6d;

}
.toast-image image{
  width: 370rpx;
  height: 300rpx;
}
.knowledge{

height: 67rpx;
border-radius: 6rpx;
color: #6b6c6d;
font-size: 30rpx;
text-align: center;
line-height: 56rpx;


}
.title{
  text-align: center;
  font-size: 45rpx;
 color: #6b6c6d;
 
}
.step{
  text-align: left;
  text-indent: 80rpx;
  padding-left:10rpx;
  padding-right:10rpx;
  margin-bottom: 8rpx;
}

2.2 template.wxml

<template name="toast">        
     <view class='toast-out' wx:if='{{isShow}}'>　　　　
         <view class='toast-in'>　　　　　　
          <view class="title">重置设备</view>  
             <view class='toast-txt'>
             　  <view class="toast-image">
                 <image src="{{icon}}"></image>　
                 </view>
                 <view class="toast-text">
              
          <view class="step" wx:for="{{txt}}" wx:key="*this">{{item}}</view>
                 </view>　　
             </view>
             <view  bindtap="toastHidden" class="knowledge">好的，我知道啦</view>　
         </view>
     </view>
</template>

3.对应的页面内容怎么放

3.1 对应的你想在那个页面放弹窗就在那个页面的wxml

<import src="../../public/html/template.wxml" />
<template is="toast" data="{{txt,isShow,icon}}"></template>

3.2对应页面的WXSS

@import '../../public/css/template.wxss';

3.2 对应页面的JS

 toastShow: function (str, icon) {
    var _this = this;
    _this.setData({
      isShow: true,
      txt: str,
      iconClass: icon
    });
    // setTimeout(function () {    //toast消失
    //   _this.setData({
    //     isShow: false
    //   });
    // }, 3000);
  },
  toastHidden: function () {
    this.setData({
      isShow: false
    });
  },

3.3对应JS的data

 icon: "/asset/reset_vichle.png",
    txt: ["1.旧设备插在车上,保持供电",
      "2.卡针插入旧设备孔内,长按5秒,红灯快闪松开",
      "3.拔下旧设备,等待3分钟",
      "4.插上新设备", "5.重新拍照上传"],
    isShow: false,

3.4调用

this.toastShow(this.data.txt, this.data.icon)

原创在这里：https://blog.csdn.net/u011364720/article/details/82890749

因为不懂怎么弄转发的发布只能这样弄啦，支持原创