點選按鈕，彈出彈窗。內含三個選項，選中其中某項，點選確認後顯示文字

1.

2.

3.

具體程式碼

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
    })
  }
})