5.微信小程序之弹窗

深碍√TFBOYSˉ_ 2022-05-08 05:56 737阅读 0赞

点击按钮，弹出弹窗。内含三个选项，选中其中某项，点击确认后显示文字

1.![70][]

2.![70 1][]

3.![70 2][]

具体代码

1.popup.wxml

<view class='btn'>
      <view wx:if="{
       {today}}">今天的心情是:{
       {choose}}</view>
      <button hover-class='dark' bindtap='Popup'>弹窗</button>
    </view>
    
    
    <view class='setPopup' wx:if="{
       {isShow}}">
      <view class='main'>
        <view class='title'>今天的心情</view>
        <radio-group class="radio-group" bindchange="radioChange">
          <label class='radio' wx:for="{
       {items}}" wx:key="{
       {index}}">
            <radio color='#fe6702' value='{
       {item.value}}' checked='{
       {item.checked}}'>{
       {item.value}}</radio>
          </label>
        </radio-group>
        <view class='bottom'>
          <button bindtap='confirm'>确定</button>
          <button bindtap='Popup'>取消</button>
        </view>
      </view>
    </view>

2.popup.wxss

/* pages/popup/popup.wxss */
    page{
      width: 100%;
      height: 100%;
    }
    .btn{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .btn view{
      margin-bottom: 50rpx;
      color:#fe6702;
    }
    button{
      width: 70%;
      background-color: #fe6702;
      color: #fff;
    }
    
    .dark{
      background-color: rgb(146, 51, 7);
    }
    
    .setPopup{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .setPopup .main{
      width: 600rpx;
      height: 500rpx;
      background: #fff;
      border-radius: 20rpx;
      font-size: 32rpx;
    }
    
    .setPopup .main .title{
      text-align: center;
      font-weight: bold;
      margin: 32rpx 0;
    }
    
    .setPopup .main .radio{
      display: block;
      margin: 30rpx 0;
      margin-left: 150rpx;
    }
    
    .bottom{
      display: flex;
    }
    
    .bottom button{
      font-size: 32rpx;
      width: 150rpx;
      height: 70rpx;
      line-height: 70rpx;
      border-radius: 50rpx;
    }

3.popup.js

// pages/popup/popup.js
    Page({
    
      data: {
        //单选按钮内容
        items:[
          {name:1,value:'开心',checked:true},
          {name:2,value:'还行吧',checked:false},
          {name:3,value:'心情不美丽',checked:false}
        ],
        //弹窗是否显示
        isShow:false,
        //设置单选按钮初始值
        choose:'开心',
        //文字是否显示
        today:false
      },
    
      //弹窗
      Popup(){
        this.setData({
          isShow:!this.data.isShow,
          //每次点开弹窗或取消弹窗时，要把单选框的数据恢复为默认
          choose:'开心'
        })
      },
    
      //单选按钮发生改变的情况
      radioChange(e){
        var choose = e.detail.value;
        this.setData({
          choose
        })
      },
      //确定按钮
      confirm(){
        this.setData({
          isShow: !this.data.isShow,
          today:true,
          choose:this.data.choose
        })
      }
    })

[70]: /images/20220508/c357124661514b8782df36f14ea569ba.png
[70 1]: /images/20220508/4c521e9519d54e3eb2b877e95549a8cf.png
[70 2]: /images/20220508/90dd97ebe2274d07963300dda1728e1c.png