小程序tabs切换 模态框添加数据（数据展示）

---

前言

其实小程序模态框没有自带的组件 以下是我自己更改的效果希望对你有所帮助 菜鸟新手 求点赞收藏

---

一、使用步骤

1.wxml

代码如下：

<image id="banner" src="../img/2.png"></image>
<view class="body">
  <view class="nav bc_white">
    <view class="{{selected?'red':'default'}}" bindtap="selected">抽奖进行中</view>
    <view class="{{selected1?'red':'default'}}" bindtap="selected1">往期中奖</view>
    <view class="{{selected2?'red':'default'}}" bindtap="selected2">我的奖品</view>
  </view>
  <view class="{{selected?'show':'hidden'}}">

    <!-- for activity -->
    
      <view class="desc">
        <image src="../img/bizhi2.jpg" style="width:200rpx;height:200rpx;margin-left:50rpx"></image>
        <view class="wite">111</view>
        <view class="wite">111</view>
      </view>
      <view class="desc">
        <image src="../img/bizhi2.jpg" style="width:200rpx;height:200rpx;margin-left:50rpx"></image>
        <view class="wite">111</view>
        <view class="wite">111</view>
      </view>
      
  </view>
  <view class="{{selected1?'show':'hidden'}}">

    for activity
    <button class="btn" bindtap="powerDrawer" data-statu="open" size="mini">button</button>

    <!--mask-->
    <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
    <!--content-->
    <!--使用animation属性指定需要执行的动画-->
    <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">

      <!--drawer content-->
      <view class="drawer_title">请输入数量</view>
      <view class="drawer_content">
        <view class="stepper">
          <!-- 减号 -->
          <text class="sign {{num <= 1 ? 'disabled' : 'normal'}}" bindtap="delCount" data-index="{{index}}">-</text>
          <!-- 数值 -->
          <input class="number" type="number" bindchange="bindManual" value="{{num}}" disabled="disabled" />
          <!-- 加号 -->
          <text class="sign {{num >= 10 ? 'disabled' : 'normal'}}" bindtap="addCount" data-index="{{index}}">+</text>
        </view>
      </view>
      <view class="btn_ok" bindtap="powerDrawer" data-statu="close"><button bindtap="getCount">提交</button></view>
    </view>
  </view>
  <view class="{{selected2?'show':'hidden'}}">
    for other
  </view>
</view>

2.js

代码如下：

 data: {
    selected:true,
    selected1:false,
    selected2:false,

    num:1,

    showModalStatus: false
  },


/* 加数 */
  addCount: function (e) {
    console.log("刚刚您点击了加1");
    var num = this.data.num;
    // 总数量-1  
    if (num < 1000) {
      this.data.num++;
    }
    // 将数值与状态写回  
    this.setData({
      num: this.data.num
    });
  },
   /* 减数 */
   delCount: function (e) {
    console.log("刚刚您点击了减1");
    var num = this.data.num;
    // 商品总数量-1
    if (num > 1) {
      this.data.num--;
    }
    // 将数值与状态写回  
    this.setData({
      num: this.data.num
    });
  },
  getCount: function (e) {
    var num = this.data.num;
    console.log(num);
    wx.showToast({
      title: "数量：" + num + "",
    })
  },
  selected:function(e){
    this.setData({
        selected1:false,
        selected2:false,
        selected:true
    })
},
  selected1:function(e){
    this.setData({
        selected:false,
        selected1:true,
        selected2:false
       
    })
},
selected2:function(e){
  this.setData({
      selected:false,
      selected1:false,
      selected2:true
  })
},


powerDrawer: function (e) { 
  var currentStatu = e.currentTarget.dataset.statu; 
  this.util(currentStatu) 
 }, 
 util: function(currentStatu){ 
  /* 动画部分 */
  // 第1步：创建动画实例  
  var animation = wx.createAnimation({ 
   duration: 200, //动画时长 
   timingFunction: "linear", //线性 
   delay: 0 //0则不延迟 
  }); 
    
  // 第2步：这个动画实例赋给当前的动画实例 
  this.animation = animation; 
  
  // 第3步：执行第一组动画 
  animation.opacity(0).rotateX(-100).step(); 
  
  // 第4步：导出动画对象赋给数据对象储存 
  this.setData({ 
   animationData: animation.export() 
  }) 
    
  // 第5步：设置定时器到指定时候后，执行第二组动画 
  setTimeout(function () { 
   // 执行第二组动画 
   animation.opacity(1).rotateX(0).step(); 
   // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象 
   this.setData({ 
    animationData: animation 
   }) 
     
   //关闭 
   if (currentStatu == "close") { 
    this.setData( 
     { 
      showModalStatus: false
     } 
    ); 
   } 
  }.bind(this), 200) 
   
  // 显示 
  if (currentStatu == "open") { 
   this.setData( 
    { 
     showModalStatus: true
    } 
   ); 
  } 
 },

2.wxss

代码如下：

#banner {
  width: 100%;
  height: 360rpx;
}

.nav {
  width: 100%;
  height: 100rpx;
  display: flex;
  flex-direction: row;
}

.default {
  line-height: 100rpx;
  text-align: center;
  flex: 1;
  border-right: 1px solid gainsboro;
  color: #000;
  font-weight: bold;
  font-size: 28rpx;
}

.red {
  line-height: 100rpx;
  text-align: center;
  color: #fc5558;
  flex: 1;
  border-right: 1px solid gainsboro;
  font-weight: bold;
  font-size: 28rpx;
}

.show {
  display: block;
  /* text-align: center; */
  line-height: 200rpx;
}

.hidden {
  display: none;
  text-align: center;
  line-height: 200px;
}



/*加减号*/

/*主容器*/  
.stepper {  
  width:130px;  
  height: 40px;  
  /*给主容器设一个边框*/  
  border: 1rpx solid #818284;  
  border-radius: 3px;  
  margin:20px auto;  
  background: white;
}  

/*加号和减号*/  
.stepper .sign {  
  width: 40px;  
  line-height: 40px;  
  text-align: center;  
  float: left;  
}  

/*数值*/  
.stepper .number {  
  width: 48px;  
  height: 40px;  
  float: left;  
   margin: 0 auto;   
  text-align: center;  
  font-size: 16px;  
  color: #000000;
  /*给中间的input设置左右边框即可*/  
  border-left: 1rpx solid #818284;  
  border-right: 1rpx solid #818284;  
}  

/*普通样式*/  
.stepper .normal{  
  color: black;  
}  
/*禁用样式*/  
.stepper .disabled{  
  color: #ccc;  
}  
button{
  width: 90%;
  color: white;
  background:#DFB741;
  margin:30px auto;  
}


/*button*/
/* .btn { 
  width: 80%; 
  padding: 20rpx 0; 
  border-radius: 10rpx; 
  text-align: center; 
  margin: 40rpx 10%; 
  background: #000; 
  color: #fff; 
 }  */
   
 /*mask*/
 .drawer_screen { 
  width: 100%; 
  height: 100%; 
  position: fixed; 
  top: 0; 
  left: 0; 
  z-index: 1000; 
  background: #000; 
  opacity: 0.5; 
  overflow: hidden; 
 } 
   
 /*content*/
 .drawer_box { 
  width: 650rpx; 
  overflow: hidden; 
  position: fixed; 
  top: 50%; 
  left: 0; 
  z-index: 1001; 
  background: #FAFAFA; 
  margin: -150px 50rpx 0 50rpx; 
  border-radius: 3px; 
 } 
   
 .drawer_title{ 
  padding:15px; 
  font: 20px "microsoft yahei"; 
  text-align: center; 
 } 
 .drawer_content { 
  height: 150rpx; 
  overflow-y: scroll; /*超出父盒子高度可滚动*/
 } 
   
 .btn_ok{ 
  padding: 10px; 
  font: 20px "microsoft yahei"; 
  text-align: center; 
  border-top: 1px solid #E8E8EA; 
  color: #3CC51F; 
 } 
   
 .top{ 
   padding-top:8px; 
 } 
 .bottom { 
   padding-bottom:8px; 
 } 
 .title { 
   height: 30px; 
   line-height: 30px; 
   width: 160rpx; 
   text-align: center; 
   display: inline-block; 
   font: 300 28rpx/30px "microsoft yahei"; 
 } 
   
 .input_base { 
   border: 2rpx solid #ccc; 
   padding-left: 10rpx; 
   margin-right: 50rpx; 
 } 
 .input_view{ 
   font: 12px "microsoft yahei"; 
   background: #fff; 
   color:#000; 
   line-height: 30px; 
 } 
   
 radio{ 
   margin-right: 20px; 
 } 

 .desc{
   display: flex;
   margin: 50rpx;
 }
 .wite{
   margin-left: 30rpx;
 }