小程序弹窗_小程序弹窗获取手机号 - CSDN
精华内容
参与话题
  • 微信小程序之弹出框

    万次阅读 2018-04-24 10:18:16
    微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT)。 看下有关参数说明: 代码很简单: wx.showToast({ title: '成功', icon: 'succes', duration: 1000, mask:true ...

    微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT)。 
    看下有关参数说明: 
    这里写图片描述
    代码很简单:

     wx.showToast({
                title: '成功',
                icon: 'succes',
                duration: 1000,
                mask:true
            })
    • 这里写图片描述 

    mask属性好像并没有起作用。有一点值得注意的是提示的延迟时间是有限制的,最大10000毫秒。 
    还有一个函数是wx.hideToast(),这个是隐藏toast,主要用于显示加载提示的时候用到,如:

    wx.showToast({
      title: '加载中',
      icon: 'loading',
      duration: 10000
    })
    
    setTimeout(function(){
      wx.hideToast()
    },2000)

    本来加载时间是10000毫秒的,然后2000毫秒的时候就隐藏了,这个具体情况而定了哈。

    第二个弹窗是模态弹窗:wx.showModal(OBJECT) 
    参数如下: 
    这里写图片描述

    这个跟我们Android里面的Dialog相似,效果如下: 
    这里写图片描述

    代码如下:

       wx.showModal({
                title: '提示',
                content: '模态弹窗',
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定')
                    }else{
                       console.log('用户点击取消')
                    }
    
                }
            })
    

    最后一个是操作菜单:wx.showActionSheet(OBJECT) 
    这个函数我们在上一篇博文用过,这里说一下也无妨。先看一下参数介绍: 
    这里写图片描述

    success有一个返回参数: 
    这里写图片描述

    这里直接贴官方实例了:

    wx.showActionSheet({
      itemList: ['A', 'B', 'C'],
      success: function(res) {
        console.log(res.tapIndex)
      },
      fail: function(res) {
        console.log(res.errMsg)
      }
    })

    效果图: 
    这里写图片描述 
    这里有个小问题,弹出showActionSheet之后,点击取消或者阴影处,会执行完fail之后,继续执行success函数,当然了,这里肯定有办法解决的,success其实有两个返回参数,除了tapIndex之外,还有一个就是cancle,cancle就是是否取消,返回一个boolean,在弹出这个框之后在success里面做个判断,if (!res.cancel) {做不取消的操作就行了}。当然了,你也可以自己来定义。下面看个自定义弹窗的:

    wxml:

      <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
      <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}" bindtap="navigate">
        <text class="title">{{title}}</text>
      </view>

    css:

    .commodity_screen {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: #000;
      opacity: 0.2;
      overflow: hidden;
      z-index: 1000;
      color: #fff;
    }
    
    .commodity_attr_box {
      width: 100%;
      overflow: hidden;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 2000;
      height: 60px;
      background: #fff;
    
    }
    
    .title {
      height: 100%;
      width: 100%;
      position: fixed;
      text-align: center;
      margin-top: 20px;
      margin-bottom: 20px;
    
    }

    js:

     showView() {
        // 显示遮罩层
        var animation = wx.createAnimation({
          duration: 200,
          timingFunction: "linear",
          delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
          animationData: animation.export(),
          showModalStatus: true
        })
        setTimeout(function () {
          animation.translateY(0).step()
          this.setData({
            animationData: animation.export()
          })
        }.bind(this), 200)
      },
    
      hideModal: function () {
        this.hideView();
      },
    
      hideView() {
        // 隐藏遮罩层
        var animation = wx.createAnimation({
          duration: 200,
          timingFunction: "linear",
          delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
          animationData: animation.export(),
        })
        setTimeout(function () {
          animation.translateY(0).step()
          this.setData({
            animationData: animation.export(),
            showModalStatus: false
          })
        }.bind(this), 200)
      }

    启用动画来做,效果杠杠的,自己动手来试试。

    也可以使用action-sheet来布局,如下:

     <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
        <block wx:for-items="{{actionSheetItems}}">
            <action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
        </block>
        <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
    </action-sheet>

    Page({
    data: {
        actionSheetHidden: true,
        actionSheetItems: items
      },
      actionSheetTap: function(e) {
        this.setData({
          actionSheetHidden: !this.data.actionSheetHidden
        })
      },
      actionSheetChange: function(e) {
        this.setData({
          actionSheetHidden: !this.data.actionSheetHidden
        })
      }
    }
    })

    就是这么简单,赶紧动起来试试吧。

    展开全文
  • 微信小程序弹窗组件

    2019-01-07 16:01:45
    自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:...

    概述

    自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家

    详细

     

    一、前言

    相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框。这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现呢。可能你会去看官方文档,但是微信的官方文档也是说的不太清楚,所以写起来也是非常痛苦。今天就带大家手摸手开发微信组件,坐稳了,马路杀手要开车了。

    二、具体实现

    我们先实现个简单的弹窗组件,详情图如下:

    实现过程如下:

    1.新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会自动生成组件的模板wxss、wxml、json、js,如图

    2.我们可以写一些组件样式和布局,更页面写法类似,我就不多说了,直接把代码贴出 :

    popup.wxml

    <view class="wx-popup" hidden="{{flag}}">
      <view class='popup-container'>
        <view class="wx-popup-title">{{title}}</view>
        <view class="wx-popup-con">{{content}}</view>
        <view class="wx-popup-btn">
          <text class="btn-no" bindtap='_error'>{{btn_no}}</text>
          <text class="btn-ok" bindtap='_success'>{{btn_ok}}</text>
        </view>
      </view>
    </view>

    popup.wxss

    /* component/popup.wxss */
    .wx-popup {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5);
    }
    .popup-container {
      position: absolute;
      left: 50%;
      top: 50%;
    
      width: 80%;
      max-width: 600rpx;
      border: 2rpx solid #ccc;
      border-radius: 10rpx;
      box-sizing: bordre-box;
      transform: translate(-50%, -50%); 
      overflow: hidden;
      background: #fff;
    }
    .wx-popup-title {
      width: 100%;
      padding: 20rpx;
      text-align: center;
      font-size: 40rpx;
      border-bottom: 2rpx solid red;
    }
    .wx-popup-con {
      margin: 60rpx 10rpx;
      text-align: center;
    }
    .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;
    }

    popup.js:

    Component({
      options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
      },
      /**
       * 组件的属性列表
       */
      properties: {
        title: {            // 属性名
          type: String,     // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
          value: '标题'     // 属性初始值(可选),如果未指定则会根据类型选择一个
        },
        // 弹窗内容
        content: {
          type: String,
          value: '内容'
        },
        // 弹窗取消按钮文字
        btn_no: {
          type: String,
          value: '取消'
        },
        // 弹窗确认按钮文字
        btn_ok: {
          type: String,
          value: '确定'
        } 
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        flag: true,
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        //隐藏弹框
        hidePopup: function () {
          this.setData({
            flag: !this.data.flag
          })
        },
        //展示弹框
        showPopup () {
          this.setData({
            flag: !this.data.flag
          })
        },
        /*
        * 内部私有方法建议以下划线开头
        * triggerEvent 用于触发事件
        */
        _error () {
          //触发取消回调
          this.triggerEvent("error")
        },
        _success () {
          //触发成功回调
          this.triggerEvent("success");
        }
      }
    })

    Component这个可以自己看微信官方文档锻炼一下自学能力^_^

    3.模板文件也建好了,在首页用这个组件需要配置一下,首先建一个名为index.json的文件,里边配置"usingComponents",就是需要引入到首页,直接上代码:

    {
      "usingComponents": {
        "popup": "/component/popup/popup"
      }
    }

    4.完成这些基本上大功告成了,还有最重要的一步也是最后一步,引入到首页,看代码

    <!--index.wxml-->
    <view class="container">
      <view class="userinfo">
        <button bindtap="showPopup"> 点我 </button>
      </view>
      <popup id='popup' 
          title='小组件' 
          content='学会了吗' 
          btn_no='没有' 
          btn_ok='学会了'
          bind:error="_error"  
          bind:success="_success">
      </popup>
    </view>

    5.配置index.js操作点击事件,这个更简单,上代码

    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      onReady: function () {
        //获得popup组件
        this.popup = this.selectComponent("#popup");
      },
    
      showPopup() {
        this.popup.showPopup();
      },
    
      //取消事件
      _error() {
        console.log('你点击了取消');
        this.popup.hidePopup();
      },
      //确认事件
      _success() {
        console.log('你点击了确定');
        this.popup.hidePopup();
      }
    })

    到此就结束,一个简单的小插件封装好了

     

    三、测试运行效果图:

    四、其他补充

    暂时没

    注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权

    展开全文
  • 微信小程序弹出弹窗提示

    千次阅读 2019-06-17 13:42:09
    点击删除提示弹窗 wx.showModal({ title: '提示', content: '确定要删除吗?', success: function (e) { if (e.confirm) { // 用户点击了确定 } else if (e.cancel) { } ...

     点击删除提示弹窗

    wx.showModal({
          title: '提示',
          content: '确定要删除吗?',
          success: function (e) {
            if (e.confirm) {
                // 用户点击了确定 
              } else if (e.cancel) {
              }
            }
          })

    操作成功以后弹出操作成功提示并关闭该页面。

     wx.showToast({
                    title: '删除成功',
                    icon: 'success',
                    duration: 1500,
                    mask: false,
                  })
                  setTimeout(function () {
                    wx.navigateBack({
                      url: '../address',
                    })
                  }, 1500)

     

    展开全文
  • 前言:小程序中提供了很多种快捷方便的弹窗API供开发者使用,例如wx.showToast,wx.showModal,wx.showActionSheet,wx.showLoading。

    前言:小程序中提供了很多种快捷方便的弹窗API供开发者使用,例如wx.showToast,wx.showModal,wx.showActionSheet,wx.showLoading还有wxml中的loading标签。

     

    一、直接上代码

    <!-- test.wxml -->
    <view class="content">
        <button bindtap="popSuccessTest">成功提示弹窗</button>
        <button bindtap="popMaskTest">带透明蒙层的弹窗</button>
        <button bindtap="popTest">纯文字弹窗</button>
        <button bindtap="popCustomIcon">自定义图标</button>
        <button bindtap="popConfirm">confirm的弹窗</button>
        <button bindtap="popLoading">加载弹窗</button>
        <button bindtap="popSelect">选择框弹窗</button>
    </view>
    //test.js
    Page({
      popSuccessTest: function () {
        wx.showToast({
          title: '成功提示弹窗',
          icon: '',     //默认值是success,就算没有icon这个值,就算有其他值最终也显示success
          duration: 2000,      //停留时间
        })
      },
      popMaskTest: function () {
        wx.showToast({
          title: '带蒙层的弹窗',     
          duration: 2000,    
          mask:true    //是否有透明蒙层,默认为false 
                       //如果有透明蒙层,弹窗的期间不能点击文档内容 
        })
      },
      popTest: function(){
        wx.showToast({
          title: '纯文字弹窗',
          icon: 'none',    //如果要纯文本,不要icon,将值设为'none'
          duration: 2000     
        })  
      },
      popCustomIcon: function () {
        wx.showToast({
          title: '自定义图标弹窗',
          image: '../../static/image/icon.png',  //image的优先级会高于icon
          duration: 2000     
        })
      },
      popConfirm: function(){
        wx.showModal({
          title: 'confirm的弹窗',
          content: '确认要删除该项吗?',
          success: function (res) {
            if (res.confirm) {  
              console.log('点击确认回调')
            } else {   
              console.log('点击取消回调')
            }
          }
        })
      },
      popLoading: function(){
        wx.showLoading({
          title:'加载中...'
        });
      },
      popSelect: function(){
        wx.showActionSheet({
          itemList: ['A', 'B', 'C'],
          success: function (res) {
            console.log(res);
          }
        })
      }
    });

    实现效果:

     

     

     

    二、重点解析

    ①、wx.showToast中比较重要的属性

    title: '弹窗文字内容',

    icon: 弹窗图标默认值是success,当没有这个属性时,或者当值为'',或者为其他值时(设置了error,warning都无效)都最终为success。如果要纯文本,不要icon,将值设为'none'

    image: 自定义图标,image的优先级会高于icon

    duration: 弹窗停留时间,

    mask: 是否有透明蒙层,默认为false ,如果有透明蒙层,弹窗的期间不能点击弹窗后面的文档内容

     

    ②、wx.showLoading注意点

    使用wx.showLoading触发的弹窗,需要用wx.hideLoading()来关闭。

     

    展开全文
  • 小程序弹窗

    2019-02-19 10:12:53
    test.js data: { modalHidden: true, ... * 显示弹窗 */ buttonTap: function () { this.setData({ modalHidden: false }) }, /** * 点击取消 */ modalCandel: function...
  • 小程序类似与Vue.js,Angular.js这样的模板引擎,这类...下面的源码未例一个有动画的小程序弹窗 代码片段链接:wechatide://minicode/OGY2jlmH7f3z 页面结构:index.wxml <view class='shade' hidden='{{p...
  • 微信小程序提示弹窗大全

    万次阅读 2017-09-28 11:43:19
    wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: ? 1 2 3 4 5 wx.showToast({  title: '成功',  icon: 'success', ...})
  • 小程序的各种弹窗

    万次阅读 2019-08-04 19:16:22
    //test.js Page({ popSuccessTest: function () { ... title: '成功提示弹窗', icon: '', //默认值是success,就算没有icon这个值,就算有其他值最终也显示success duration: 2000, //停留时间 }) }...
  • 小程序弹窗的几种形式

    万次阅读 2018-10-26 16:31:23
    小程序弹窗的几种形式 一.wx.showToast(Object object) 显示消息提示框 1.不带图标的信息提示 wx.showToast({ title: '服务暂未开通', icon: 'none', duration: 2000 }) 2.带图标得提示:加载中、提示...
  • 最近发现电脑各种弹窗,是真的烦,在控制面板发现个有个弹窗小程序,卸载不了   卸载调到360卸载,任然卸载不了。 无赖之下在注册表中搜了下弹窗发现了,然后直接把左边的目录删除掉就好了 ...
  • ![图片说明](https://img-ask.csdn.net/upload/201804/20/1524229197_645775.png) 以上是代码,怎么设置让弹窗点击外部无反应,只能点击确定,谢谢了
  • 官方API中wx.showModel()不支持自定义弹窗界面。 微信小程序自定义弹窗:http://www.jianshu.com/p/c388c01b664e
  • 弹出 fixed 弹窗后,在弹窗上滑动会导致下层的页面一起跟着滚动。解决方法:在弹出层加上 catchtouchmove 事件 示例代码:&lt;view class="modal-view" hidden="{{!showModal}}" bindtap=&...
  • 如何去除万能五笔的定时弹窗

    万次阅读 2018-08-24 22:07:53
    最近的万能五笔总是会在桌面右下角定时弹出广告,非常麻烦 经查,位于安装目录下的wncloud.exe会定时联系外网,每逢8...显然,禁止此程序连网,即可避免万能五笔定时弹窗。 笔者已经禁止了所有wn开头的程序连网!...
  • 用户进到小程序的第一个页面不是tab主页面,而是授权页面。 &amp;lt;button open-type='getUserInfo' bindgetuserinfo='getuserinfo' class='sz_btn' type='primary' /&amp;gt; /*微信授权登陆 */ ...
  • 小程序显示弹窗时禁止下层的内容滚动 ① 第一种方式 利用position:fixed. 禁止页面滚动. 一. 页面结构html  &lt;view class="indexPage {{proInfoWindow?'indexFixed':''}}"&gt; -------...
  • 小程序点击弹窗事件

    千次阅读 2018-05-23 09:52:41
    &lt;!-- 触发弹出层:bindtap="show" --&gt; &lt;view class="fenxiang-box"&gt; &lt;view bindtap="... style='text-align:center' style='margin:500rpx 170rpx;...
  • 微信小程序实现弹窗预览图片

    万次阅读 2018-04-03 23:58:24
    用到了zan-ui的弹窗样式,要引入zan-ui的框架,不会的话,可以看这篇文章微信小程序之第三方UI框架 zanui 使用教程有一个商品点击图片一个弹窗的效果实现预览图片wxml代码首先是图片的代码&lt;image src="{{...
  • 首先说下现在wx.getUserInfo接口已经废弃,也就是你不能通过该接口获取nickName等信息,更不必说授权的弹窗。其次,新的方法是通过&lt;button open-type="getUserInfo" lang="zh_CN" ...
  • 最近在做小程序,由于小程序提供的弹窗样式有限,我们通常会自定义弹窗组件(我都是在弹窗蒙层上加了catchtouchmove="true",保证最基本的穿透问题但是解决不了弹窗内容区域需要滚动的情况),那么就会导致页面穿透...
1 2 3 4 5 ... 20
收藏数 18,917
精华内容 7,566
关键字:

小程序弹窗