微信小程序实现简单弹框具体代码丨本际云推荐

微信小程序实现简单弹框具体代码

微信小程序实现简单弹框

作为本际云服务器推荐网的小编小本本，今天分享一个在微信小程序实现简单弹框的具体代码。以下是具体内容：

微信小程序实现简单弹框具体代码

页面结构

以下是页面结构的代码：

<!-- 遮罩层 -->
<view>
  <view class="mask" bindtap="close" wx:if="{{ showModal }}"></view>
  <view class="modal" wx:if="{{ showModal }}">
    <view class="dialog">
      <view class="dialog-head">
        <h3>发送短信</h3>
      </view>
    </view>
    <view class="section section_gap">
      <radio-group class="radio-group" bindchange="radioChange">
        <radio class="radio" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
          <text>{{item.value}}</text>
        </radio>
      </radio-group>
    </view>
    <view>
      <textarea class="textarea w100" placeholder="短信内容" maxlength="-1" v-model="params.bz"></textarea>
    </view>
    <view class="btnFlex">
      <view>
        <button class="btn" bindtap="close">取消</button>
      </view>
      <view>
        <button class="btn" bindtap="go">发送</button>
      </view>
    </view>
  </view>
</view>

页面样式

以下是页面的样式：

.btn{
  color: #fff;
  font-size: 31rpx;
  background-color: #f95137;
  margin: 11rpx 20rpx 0rpx;
  border-radius: 45rpx;
  width: 215rpx;
  height: 81rpx;
  line-height: 81rpx;
}
.btnFlex{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50rpx;
}
.dialog-head{
  font-size: 33rpx;
  color: #172238;
  font-weight: bold;
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #e1e5e9;
}
.textarea {
  width: 92%;
  height: 246rpx;
  margin: 20rpx 30rpx;
  margin-top: 20rpx;
  padding: 20rpx;
  border-radius: 6rpx;
  border: solid 1rpx #e7eaf0;
  background-color: #f4f6f9;
}
.radio {
  width: 33%
}
.section_gap {
  margin: 20rpx 30rpx;
}

JS

以下是相关js的代码：

Page({
  data:{
    showModal:false,
    items:[
      {name:'USA',value:'刘禅'},
      {name:'CHN',value:'刘备',checked:'true'},
      {name:'BRA',value:'诸葛亮'},
      {name:'JPN',value:'关羽'},
      {name:'ENG',value:'赵云'},
      {name:'FRA',value:'张子龙'},
    ]
  },
  //给自定义button或者自定义view添加一个点击事件跳转，这里的html就不给出来了
  signinTap:function(e){
    this.setData({
      showModal:true,
    })
    //具体调用接口省略***
  },
  //发送
  go(){
    this.setData({
      showModal:false
    })
    //具体调用接口省略***
  },
  //取消
  close(){
    this.setData({
      showModal:false
    })
    //this.showModal = false;
  }
})

以上是微信小程序实现简单弹框的相关代码，具体内容可以根据自己的需要进行修改。

原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7133.html