微信小程序实现简单弹框效果

2024-12-03 21:11:15

本文实例为大家分享了微信小程序实现简单弹框的具体代码，供大家参考，具体内容如下

1、页面结构

<!-- 遮罩层 -->
<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>

2、页面样式

 .btn{
  color: #fff;
  font-size: 31rpx;
  background-color: #f95137;
  margin: 11rpx 20rpx 0rpx;
  border-radius: 45rpx;
  width: 215rpx;
  height: 81rpx;
  line-height: 81rpx;
  /* padding-left: ;   */
  }
.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;
}

3、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;
   },

实战项目图片

项目实战小积累，虽然网上千篇一律，但是还是做一下记录，也希望能帮到有需要的你们。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序弹框和模态框实现代码

微信小程序弹框和模态框实现代码实现效果图: 实现代码: <view class="wxapp-modal" style="{{modal_style}}"> <view class="content"> </view> <view class="mask" bindtap="closeModal"></view> </view> /
微信小程序之几种常见的弹框提示信息实现详解

一.模态窗口 delete(){ wx.showModal({ title: '', content: '是否确认删除', success(res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } } }) } 二.提示你想提示的信息提示你想提示的信息 wx.showToast({ title: '成功', icon: 'success', duration:
微信小程序开发实现首页弹框活动引导功能

目录 1.需求 2.数据库设计 3.Java后台配置实现 4.微信小程序前端实现总结 1.需求后台可以配置活动时间,在活动期间,自动在小程序首页,以弹框形式显示活动图片.用户可以关闭活动图片的显示. 1.管理后台可以新增活动时间段,是否弹框显示,弹框图片和活动是否开启配置 2.进入小程序时,请求一下后台是否有弹框活动,如果有,就弹框显示活动图片 2.数据库设计由于小程序弹框活动是系统配置中的一项,直接使用公共的系统配置来存储弹框活动配置. 公共系统配置表结构如下: CREATE TABLE
微信小程序自定义弹框效果

本文实例为大家分享了微信小程序自定义弹框效果的具体代码,供大家参考,具体内容如下 wxml  <view class="cancelBtn" bindtap="cancelOrder" data-id="{{item.id}}" data-type="{{type}}">取消订单</view>  <view cla
微信小程序开发之toast等弹框提示使用教程

介绍微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT) . 看下有关参数说明: 代码很简单: wx.showToast({ title: '成功', icon: 'succes', duration: 1000, mask:true }) mask属性好像并没有起作用.有一点值得注意的是提示的延迟时间是有限制的,最大10000毫秒. 还有一个函数是wx.hideToast() ,这个是隐藏toast,主要用于显示加载提示的时候用到,
微信小程序实现自定义动画弹框/提示框的方法实例

目录前言 css3 实现动画小程序动画 API-实现动画结语相关文档前言在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等如今,有一些现成的 UI 库,虽然已经实现了的,但若只是为了实现一个底部弹出框或者自定义提示框,不引用第三方 UI 库怎么手动原生方式去实现呢,最主要的是怎么去实现动画 css3 实现动画如下是wxml代码 <view> <view class="click-btn" catcht
微信小程序实现弹框效果

本文实例为大家分享了微信小程序实现弹框效果的具体代码,供大家参考,具体内容如下先上代码 wxml部分: <view class='top' bindtap='powerDrawer' data-statu="open" data-num='300'> <text>向上弹起</text> </view> <view class='top' bindtap='powerDrawer' data-statu="open&quo
微信小程序开发之实现自定义Toast弹框

前言之前有篇文章是写的Toast使用,但是有时候官方的样式并不能满足业务要求,怎么办呢,当然有解决办法了.有一个插件可以直接帮我们完成,WeToast. 先来看一下效果图: 怎么用呢,我们来看一下: WeTaost插件源码位于src目录下,包含3个文件. wetoast.js: 脚本代码 wetoast.wxml: 模板结构 wetoast.wxss: 样式使用时只需要加入以上3个文件即可第一步:在项目的app.js中引入wetoast.js,并注册到小程序上,小程序所有Page页面均可使
微信小程序 modal弹框组件详解

微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 .wxml <modal hidden="{{hidden}}" title="这里是title" confir
微信小程序实现简单弹框效果

本文实例为大家分享了微信小程序实现简单弹框的具体代码,供大家参考,具体内容如下 1.页面结构  <view> <view class="mask" bindtap="close" wx:if="{{ showModal }}"></view> <view class="modal" wx:if="{{ showModal }
微信小程序实现简单搜索框

本文实例为大家分享了微信小程序实现简单搜索框的具体代码,供大家参考,具体内容如下 app.json { "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#16C4AF"
微信小程序实现复选框效果

本文实例为大家分享了微信小程序实现复选框片展示的具体代码,供大家参考,具体内容如下样式部分你们自由发挥,反正这里是什么都没写的,选中和没选中直接用这个this.data.arrStatus[checkIndex]去判断就行了,之后你们都懂的. 效果预览: js部分 // page/index/index.js Page({ /** * 页面的初始数据 */ data: { items: [ { name: 'USA', value: '美国' }, { name: 'CHN', value:
微信小程序实现简单跑马灯效果

跑马灯效果比较常见,一般做电商类的小程序,都会用到,所以代码君今天特地写一篇文章,来教一下大家,如何去实现跑马灯效果,下面是代码君实现的效果,可以先看一下! 跑马灯效果的制作制作方式很简单,先方上代码,后面会对代码详细讲解一.wxml界面的实现  <view class="example"> <view class="marquee_box"> <view class="marque
微信小程序实现简单Tab切换效果

本文实例为大家分享了微信小程序实现Tab切换效果的具体代码,供大家参考,具体内容如下使用步骤代码如下(示例): 定义一个状态status data: { status: 0, }, 代码如下(示例): 在点击切换时利用status来切换根据index下标来实现 js代码: handtab(e) { console.log(e); let index = e.currentTarget.dataset.index console.log(index); this.setData({ curre
JS中微信小程序自定义底部弹出框

实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}" class="commodity_a
微信小程序自定义纯净模态框（弹出框）的实例代码

由于官方API提供的模态框只能显示简单的文字,但是在实际应用场景中,我们需要模态框上能够显示各种各样的组件和样式,所以,以此为基础模拟出一套可以供大家自定义的纯净版的模态框,满足大家各式各样的需求. 效果图: WXML: <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{!showModal}}"
微信小程序实现底部弹出模态框

本文实例为大家分享了微信小程序实现底部弹出模态框的具体代码,供大家参考,具体内容如下代码: <view class="modals modals-bottom-dialog" hidden="{{hideModal}}" style="width:100%;height:{{widheight}}px"> <view class="modals-cancel" bindtap="hideModal
微信小程序自定义底部弹出框功能

本文实例为大家分享了微信小程序自定义底部弹出框的具体代码,供大家参考,具体内容如下实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画).效果图如下: 可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属性的弹出框.只需要把内容替换自己需要的即可. 1. wxml代码 <view class="wrap"> <view bindtap="showModal"> &
微信小程序select下拉框实现效果

小程序中是没有h5中的下拉标签的所以要实现下拉功能就必须自己动手写拉这里为了更清楚的显示层级就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>￥99.00</text> </view>  <view class='list-msg2' bindtap='bi

微信小程序实现简单弹框效果

相关推荐

随机推荐