精华内容
下载资源
问答
  • 小程序弹窗
    2022-03-18 10:34:20

    一、询问弹窗,如果报错:Cannot read property 'data' of undefined

    可写成以下

        wx.showModal({
          title: '提示',
          content: '确定要删除吗?',
          success :(res)=> {
            if (res.confirm) {
              this.deleteBattery()
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })

    二、普通弹窗:

        wx.showToast({
         title: '成功',
         icon: 'success',
         duration: 2000//持续的时间
       })

    三、提示等待弹窗

        wx.showToast({
         title: '加载中...',
         icon: 'loading',
         duration: 2000//持续的时间
       })

    四、不带符号文字弹窗

    
       wx.showToast({
         title: '不带图标文字弹窗!',
         icon: 'none',
         duration: 2000//持续的时间
       })
    

    五、选择弹窗

    
       wx.showActionSheet({
         itemList: ['1', '2', '3'],
         success: function (res) {
           if (!res.cancel) {
             console.log(res.tapIndex)
           }
         }
       })
    

    更多相关内容
  • 微信小程序 弹窗 首先wxml代码: 暂无有关信息 点击此处</view>  注:hidden属性用于切换比较频繁的地方。 wxss代码设置弹窗样式: .myToast{ width:240rpx; height:130rpx; line-height: 130rpx; margin:80...
  • 主要介绍了微信小程序 弹窗输入组件的实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要为大家详细介绍了微信小程序表单弹窗实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了微信小程序自定义弹窗实现详解(可通用),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序弹窗

    2022-02-18 17:33:14
    显示消息提示框 wx.showToast(OBJECT) wx.showToast({ title: '加载中', icon: 'loading', duration: 10000 }) 隐藏消息提示框 wx.hideToast() ...显示模态弹窗 ... content: '这是一个模态弹窗' .
    1. 显示消息提示框
      wx.showToast(OBJECT)
    wx.showToast({
     title: '加载中',
     icon: 'loading',
     duration: 10000
    })
    
    1. 隐藏消息提示框
      wx.hideToast()
    setTimeout(function(){
     wx.hideToast()
    },2000)
    
    1. 显示模态弹窗
      wx.showModal(OBJECT)
    wx.showModal({
      title: '提示' ,
      content: '这是一个模态弹窗' ,
      success: function (res) {
       if (res.confirm) {
        console.log( '用户点击确定' )
       } else {
    	console.log( '用户点击取消' )
       }
      }
    })
    
    1. 显示操作菜单
      wx.showActionSheet(OBJECT)
    wx.showActionSheet({
     itemList: ['A', 'B', 'C'],
     success: function(res) {
      if (!res.cancel) {
       console.log(res.tapIndex)
      }
     }
    })
    
    展开全文
  • 主要为大家详细介绍了微信小程序实现蒙版弹窗效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了微信小程序实现漂亮的弹窗效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序弹窗组件

    千次阅读 2021-01-27 10:26:30
    最近在开发小程序应用, 发现小程序当中有关于组件的介绍非常的少, 当前自己做的项目当中,有出现过这种情况, 所以自己就封装了一个小程序弹窗组件, 现在把自己的心得分享给大家, 大家一起来学习吧~~ 效果图 需求...

    介绍

    最近在开发小程序应用, 发现小程序当中有关于组件的介绍非常的少, 当前自己做的项目当中,有出现过这种情况, 所以自己就封装了一个小程序的弹窗组件, 现在把自己的心得分享给大家, 大家一起来学习吧~~

    效果图

    在这里插入图片描述

    需求背景

    项目需求是需要在页面上通过点击按钮, 然后弹出弹窗蒙层; 因为小小程序当中经常会用到弹窗, 因此这里我直接将弹窗封装成了一个组件, 下次使用的时候,直接调用就可以了~~~

    实现步骤

    1. 在微信小程序当中, 在当前项目当中, 新建一个component 文件夹, 这个文件夹专门用来存放我们要使用的组件, 然后在 component 文件夹下右击, 新建文件夹popup , 这里就是我们要用的弹窗组件的文件夹, 再右击popup文件夹, 选择 新建component , 然后直接输入popup 即可, 小程序内部会为我们自动生成.wxss , wxml , json , js等模板文件, 如下图所示, popup文件夹下的文件为我们的组件, index文件夹下的文件为首页上页面:
      在这里插入图片描述
    2. popup弹窗组件的代码部分;
      popup.wxml
    <view class="wx-popup" style="margin:-{{windowHeight/2}}px 0 0 -{{windowWidth/2}}px" hidden="{{flag}}">
      <view class='popup-container'>
        <view class="wx-popup-title">{{title}}</view>
        <!-- <view class="wx-popup-con" >{{content}}</view> -->
        <view class="wx-popup-con" >
          <text>{{content_leftText}}</text>
          <text class="content_money">{{content_money}}</text>
          <text>{{content_rightText}}</text>
        </view>
        <view class="wx-popup-btn">
          <view class="closeBtn">
            <view class="close-popup" bindtap='_close'>
              <view>X</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    

    popup.wxss

    .wx-popup {
      position: fixed;
      left: 0;
      bottom: 0;
      top: 0;
      z-index: 2000;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .6);
    }
    .popup-container {
      position: fixed;
      left: 10%;
      top: 20%;
      width: 80%;
      max-width: 600rpx;
      border-radius: 20rpx;
      box-sizing: bordre-box;
      background: #fff;
      z-index: 2000;
    }
    .wx-popup-title {
      width: 100%;
      padding: 28rpx;
      text-align: center;
      font-size: 36rpx;
      font-weight: bold;
      border-bottom: 5rpx solid #9EA3BA;
      box-sizing: border-box;
    }
    .wx-popup-con {
      margin: 50rpx 10rpx;
      text-align: center;
      padding: 0 86rpx;
    }
    .wx-popup-con text {
      padding-bottom: 10rpx;
    }
    .content_money {
      color: #FFB258;
    }
    .wx-popup-btn {
      display: flex;
      justify-content: space-around;
      margin-bottom: 40rpx;
    }
    .wx-popup-btn text {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30%;
      height: 88rpx;
      border: 2rpx solid #ccc;
      border-radius: 88rpx;
    }
    .wx-popup-btn .closeBtn {
      position: fixed;
      left: 45%;
      bottom: 30%;
    }
    .wx-popup-btn .close-popup {
      position: relative;
      height: 80rpx;
      width: 80rpx;
      border: 5rpx solid #fff;
      border-radius: 50%;
    }
     .wx-popup-btn .close-popup view {
       position: absolute;
       left: 30%;
       top: 8%;
       font-size: 50rpx;
       color: #fff;
     }
    

    popup.js

    Component({
      options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
      },
      /**
       * 组件的属性列表
       */
      properties: {
        title: {            // 属性名
          type: String,     // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
          value: '标题'     // 属性初始值(可选),如果未指定则会根据类型选择一个
        },
        // 弹窗内容
        content_leftText: {
          type: String,
          value: '内容'
        },
        content_money: {
          type: String,
          value: '内容'
        },
        content_rightText: {
          type: String,
          value: '内容'
        },
      },
      /**
       * 组件的初始数据
       */
      data: {
        flag: true,
      },
      /**
       * 组件的方法列表
       */
      methods: {
        //隐藏弹框
        hidePopup: function () {
          this.setData({
            flag: !this.data.flag
          })
        },
        //展示弹框
        showPopup () {
          this.setData({
            flag: !this.data.flag
          })
        },
        /*
        * triggerEvent 用于触发事件
        */
        _close() {
          this.triggerEvent("close");
        }
      }
    })
    
    1. 完成模板文件的工作后, 接下来就是在首页当中对这个组件进行配置, 在index文件夹当中对index.json文件进行配置, 代码如下:
      在这里插入图片描述
    2. 在首页当中进行使用,代码如下:
     <view class="index_popup">
        <view class="btn-area">
            <button type="primary" bindtap="showPopup">点击预测价钱</button>
        </view>
        <popup id='popup'
            title='预测价格' 
            content_leftText='您好,预测价格为'
            content_money='{{content_money}}' 
            content_rightText='元 , 预测价格和实际价格存在偏差,请耐心等候专业顾问为您服务。'  
            bind:close="_close">
        </popup>
    </view>
    
    1. index.wxss的样式
    .index_popup .btn-area button {
      background-image: linear-gradient(to right, rgba(36, 162, 255), rgba(36, 172, 255), rgba(36, 192, 255));
      font-size: 34rpx;
      font-weight: normal;
      border-radius: 50rpx;
      padding: 18rpx 30rpx;
      margin-top: 100rpx;
    }
    
    1. index.js 文件里, 配置对应的点击事件, 还有操作数据
    // index.js
    // 获取应用实例
    const app = getApp()
    Page({
      data: {
        content_money: '1000万'
      },
      onReady: function () {
        //获得popup组件
        this.popup = this.selectComponent("#popup");
      },
      showPopup() {
        this.popup.showPopup();
      },
      //取消事件
      _close() {
        console.log('你点击了关闭按钮');
        this.popup.hidePopup();
      },
      onLoad() {
      },
    })
    

    至此, 就全部结束了, 当点击首页index.wxml上的按钮时, 弹出弹窗组件, 点击弹窗页面下的X按钮, 可以关闭弹窗。

    展开全文
  • 1.带对号弹窗 uni.showToast({ title: '标题', duration: 5000 }); 2.无icon弹窗 uni.showToast({ title: '标题', icon:'none', duration: 5000 }); 3.加载弹窗 uni.showLoading({ title: '加载中', ...

    1.带对号弹窗 小程序把开头uni换成wx即可

    uni.showToast({
    	title: '标题',
    	duration: 5000
    });
    

    2.无icon弹窗

    uni.showToast({
    	title: '标题',
    	icon:'none',
    	duration: 5000
    });
    

    3.加载弹窗

    uni.showLoading({
        title: '加载中',
        duration: 5000
    });
    

    以上都可以去除时间 使用uni.hideToast();关闭

    uni.hideToast();
    

    4.只有确认提示

    wx.showModal({
    	title: '提示',
    	content: '只有确认!',
    	showCancel: false,
    	success: function(res) {
    	console.log('用户点击了确认')
    })
    

    5.带取消 确认交互弹窗

    uni.showModal({
        title: '提示',
        content: '这是一个模态弹窗',
        success: function (res) {
            if (res.confirm) {
                console.log('用户点击确定');
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        }
    });
    
    展开全文
  • wxml: <view class="made_box" wx:if="{{passShow}}"> <view class="main"> <view class='title'> <view class="f-f">请输入直播间密码<...input class="input" pla...
  • 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改。下面通过本文给大家带来了微信小程序自定义弹窗wcPop插件,感兴趣的朋友跟随小编一起看看吧
  • 最近在做微信小程序的开发,涉及到自定义弹窗,然而当我的表单页面过长,同时自定义弹窗也过长,即两者都需要滚动的时候,问题出现了: 问题:当我滚动弹出窗页面时,会导致后面的页面也出现滚动的表现: 解决思路:...
  • 小程序弹窗出现背景禁止滑动效果 wxml部分 <view class="mask" catchtouchmove="stopEvent" wx:if="{{modal}}"> <view class="modal-content"> 我是弹窗内容 </view> </view> js部分 ...
  • 封装小程序 弹窗方法

    2021-12-07 13:49:21
    const formatTime = date => { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hour = date.getHours() const minute = date.getMinutes() ...
  • 小程序 弹窗

    2021-09-01 15:52:04
    -- 弹窗 --> <!-- 灰色遮罩,防止误触,可加可不加 --> <view class="mask" wx:if="{{开关}}"></view> <!-- 自定义的弹窗 --> <view class="windows" wx:if="{{开关}}"> <...
  • wx.showModal({ title: '提示', content: '您确定要删除该文件吗?', showCancel: true, //是否显示取消按钮-----》false去掉取消按钮 cancelText: "否", //默认是“取消” ... cancelColor: 'skyblue', //取消...
  • 网页&小程序弹窗设计

    2022-06-13 10:47:06
    弹窗分为模态弹窗和非模态弹窗 在实际项目中我们将模态弹窗分为:对话弹框,内嵌表单弹窗,分布弹窗,文件选择,复杂信息展示。(带有蒙版和交互信息)
  • 微信小程序弹窗,微信小程序页面跳转、弹出框浏览量:2396时间:2019-12-09来源:Reyon_一、页面跳转页面跳转是微信小程序中使用较为频繁并且很重要的功能之一,页面跳转一般是通过点击按钮或者文本区域后需要进行的...
  • 主要介绍了微信小程序常用的3种提示弹窗实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • wx.showToast({ title: '评价成功!', duration: 800, success: function () { setTimeout(function () { wx.navigateBack({ delta: 1 }) }, 100); } })
  • 小程序弹窗

    2020-09-01 01:22:09
    小程序自定义组件 创建组件目录 在项目目录下新建component文件夹(可自定义),该目录主要存放自定义的组件资源。为使目录结构清晰,再为组件新建一个目录,例如:dialog 创建组件文件 在dialog目录下右键,...
  • 如何关闭小弹窗(广告)?1、首先在电脑上安装360安全卫士或360软件管家,打开360安全卫士。2、打开360安全卫士里的“软件管家”。3、在打开的软件管家界面点击“净化”按钮,接着点击“全面净化”。4、软件扫描电脑中...
  • 微信小程序弹窗总结

    2020-09-05 15:44:33
    微信小程序弹窗种类 弹窗总类: wx.showModal() wx.showLoading() wx.showActionSheet() wx.showToast() 有时候我们可能不知道要什么弹窗,那么就可以使用排除法,是不是加载的加载中使用wx.showLoading(),是不是...
  • 微信小程序弹窗禁止页面滚动

    千次阅读 2020-12-30 15:30:36
    小程序弹窗时,外部页面禁止滚动, 可以在最外部容器设置catchtouchmove 但是如果弹窗内部也需要滚动,需要用scroll-view包裹,并设置scroll-y catchtouchmove需要接收个方法,不然会一直警告 <view class="box...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,298
精华内容 13,319
关键字:

小程序弹窗