精华内容
下载资源
问答
  • 小程序弹窗

    2020-11-27 09:18:33
    1.Toast handleShowToast(){ wx.showToast({ title: '你好啊', duration:3000, icon:'none', ... console.log('展示弹窗成功'); }, fail(){ console.log('展示弹窗失败'); }, complete(){

    1.Toast

    在这里插入图片描述

      handleShowToast(){
        wx.showToast({
          title: '你好啊',
          duration:3000,
          icon:'none',
          mask:true,
          success(){
            console.log('展示弹窗成功');
          },
          fail(){
            console.log('展示弹窗失败');
          },
          complete(){
            console.log("完成函数的调用");
          }
        })
      },
    

    在这里插入图片描述

    2.modal

    <!-- modal -->
    <button  bindtap="handleShowModal">ShowModal</button>
    
    handleShowModal(){
        wx.showModal({
          title:'确定退出吗',
          content:"我是内容 hahah ",
          cancelColor: 'red',
          confirmColor:'#58bc58',
          success(res){
            // console.log(res);
            if(res.cancel){
              console.log("取消");
            }
            if(res.confirm){
              console.log("确定");
            }
          },
          showCancel:true,
          cancelText:"退出"
        })
      },
    

    在这里插入图片描述

    3.loading

    <!-- loading -->
    <button  bindtap="handleShowLoading">ShowLoading</button>
    
    handleShowLoading(){
        wx.showLoading({
          title: '加载中',
          mask: true,
          success: (res) => {},
          fail: (res) => {},
          complete: (res) => {},
        })
        setTimeout(()=>{
          // 必须手动调用hideLoading才会消失
          wx.hideLoading()
        },2000)
      },
    

    在这里插入图片描述

    4.actionSheet

    <!-- actionSheet -->
    <button  bindtap="handleShowActionSheet">actionSheet</button>
    
      handleShowActionSheet(){
      wx.showActionSheet({
        itemList: ['相册','拍照'],
        itemColor:'red',
        success(res){
          console.log(res);
        },
        fail(err){
          console.log(err);
          
        }
      })
      },
    

    在这里插入图片描述

    5.分享

    第一直接按按钮

    <!-- 分享按钮 -->
    <button open-type="share">分享</button>
    

    第二按右上角

      onShareAppMessage: function () {
        return {
          title:"小程序aaa",
          path:"pages/index/index",
          imageUrl:'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
        }
      }
    
    展开全文
  • 小程序 弹窗

    2021-09-01 15:52:04
    -- 弹窗 --> <!-- 灰色遮罩,防止误触,可加可不加 --> <view class="mask" wx:if="{{开关}}"></view> <!-- 自定义的弹窗 --> <view class="windows" wx:if="{{开关}}"> <...

    html

    <!-- 弹窗 -->
      <!-- 灰色遮罩,防止误触,可加可不加 -->
      <view class="mask" wx:if="{{开关}}"></view>
      <!-- 自定义的弹窗 -->
      <view class="windows"  wx:if="{{开关}}">
         <内容。。。。。>
      </view>
    

    css

    //阴影
    .mask{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 90;
      background-color: #000;
      opacity: 0.5;
    }
    //弹窗大小样式
    .windows{
      width: 84%;
      height: 650rpx;
      background-color: white;
      position: fixed;
      left: 8%;
      top: 30%;
      z-index: 99;
      border-radius: 30rpx;
    }

    展开全文
  • 主要介绍了微信小程序 弹窗自定义实例代码的相关资料,有时候做开发项目的时候需要根据客户需求更改原系统的组件,这里就对小程序中弹窗进行更改,需要的朋友可以参考下
  • 小程序 弹窗组件

    2020-05-07 17:01:59
    本文主要分成了两个部分,第一部分为微信小程序弹窗组件的具体步骤,第二部分为小程序的多种弹窗类型。 第一部分 微信小程序弹窗组件的具体步骤 1.新建component文件夹存放我们的组件,里边存放的就是我们所用的组件...

    本文主要分成了两个部分,第一部分为微信小程序弹窗组件的具体步骤,第二部分为小程序的多种弹窗类型。

    第一部分 微信小程序弹窗组件的具体步骤

    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
    .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");
        }
      }
    })
    
    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操作点击事件
    //获取应用实例
    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();
      }
    })
    

    第二部分 小程序的多种弹窗类型

    1. 纯文本提示
    wx.showToast({
       title: '纯文字弹窗',
       icon: 'none',    //如果要纯文本,不要icon,将值设为'none'
       duration: 2000     
    })  
    
    2. 取消确认提示
     wx.showModal({
       title: 'confirm的弹窗',
       content: '确认要删除该项吗?',
       success: function (res) {
         if (res.confirm) {  
           console.log('点击确认回调')
         } else {   
           console.log('点击取消回调')
         }
       }
    })
    
    3. 成功提示
    wx.showToast({
       title: '成功提示弹窗',
       icon: '',     //默认值是success,就算没有icon这个值,就算有其他值最终也显示success
       duration: 2000,      //停留时间
    })
    
    4. 自定义图标弹窗
    wx.showToast({
       title: '自定义图标弹窗',
       image: '../../static/image/icon.png',  //image的优先级会高于icon
       duration: 2000     
    })
    
    5. 加载中提示
    wx.showLoading({
       title:'加载中...'
    });
    
    6. 带蒙层的弹窗
    wx.showToast({
        title: '带蒙层的弹窗',     
        duration: 2000,    
        mask:true    //是否有透明蒙层,默认为false 
                     //如果有透明蒙层,弹窗的期间不能点击文档内容 
    })
    
    7. 有列表的弹窗
    wx.showActionSheet({
       itemList: ['A', 'B', 'C'],
       success: function (res) {
         console.log(res);
       }
    })
    
    隐藏 wx.hideToast() wx.hideLoading()

    本文章转载自:
    1.小程序的各种弹窗
    2.微信小程序弹窗组件详解
    如有侵权,请联系,马上删除。

    展开全文
  • 主要介绍了微信小程序 弹窗输入组件的实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序弹窗wcPop|小程序自定义弹窗组件|提示框alert、确认框confirm及model、toast弱提示 微信小程序官方提供的交互反馈弹窗组件功能非常有限,很多自定义功能都不能实现,如是就自己开发了一个小程序自定义弹窗...
    微信小程序弹窗wcPop|小程序自定义弹窗组件|提示框alert、确认框confirm及model、toast弱提示
    微信小程序官方提供的交互反馈弹窗组件功能非常有限,很多自定义功能都不能实现,如是就自己开发了一个小程序自定义弹窗插件wcPop,可以随意自定义弹窗模板,能实现各种不同场景,api简单调用方便。

    转载于:https://my.oschina.net/xiaoyan2016/blog/2966627

    展开全文
  • 百度小程序自定义信息框|智能小程序弹窗插件开发|alert警告信息框|dialog对话框|吐司Toast提示框 智能小程序官方提供的弹窗和微信小程序、支付宝小程序一样,功能都比较限制死了,不能进行一些特殊的定制,本人喜欢...
  • 微信小程序弹窗总结

    2020-09-05 15:44:33
    微信小程序弹窗种类 弹窗总类: wx.showModal() wx.showLoading() wx.showActionSheet() wx.showToast() 有时候我们可能不知道要什么弹窗,那么就可以使用排除法,是不是加载的加载中使用wx.showLoading(),是不是...
  • 描述 小程序弹窗使用方法 引入组件相关文件  在使用弹窗的页面引入组件 <toast id="toast" params="{{params}}"></toast> 在app.wxss中全局引入组件样式 @import '/components/t...
  • 小程序弹窗的几种形式

    万次阅读 2018-10-26 16:31:23
    小程序弹窗的几种形式 一.wx.showToast(Object object) 显示消息提示框 1.不带图标的信息提示 wx.showToast({ title: '服务暂未开通', icon: 'none', duration: 2000 }) 2.带图标得提示:加载中、提示...
  • 微信小程序弹窗显隐动态控制页面滚动 需求描述:点击van-dropdown-menu菜单,弹出弹窗之后页面不可滚动,点击关闭弹窗时,页面恢复可滚动。 方案一: 打开弹窗时,给页面page的style样式加上overflow: 'hidden',...
  • 小程序弹窗时,外部页面禁止滚动, 可以在最外部容器设置catchtouchmove 但是如果弹窗内部也需要滚动,需要用scroll-view包裹,并设置scroll-y catchtouchmove需要接收个方法,不然会一直警告 <view class="box...
  • 微信小程序弹窗组件

    2021-01-27 10:26:30
    最近在开发小程序应用, 发现小程序当中有关于组件的介绍非常的少, 当前自己做的项目当中,有出现过这种情况, 所以自己就封装了一个小程序弹窗组件, 现在把自己的心得分享给大家, 大家一起来学习吧~~ 效果图 需求...
  • 打开,'本地小程序项目 - 添加项目',项目目录选择为 miniprogram_dev 目录 使用 安装 npm install --save wechat-miniprogram-dialog 每次引入或更新需先执行开发者工具的 npm 构建, 在你的页面json中添加 { ...
  • 1.带对号弹窗 uni.showToast({ title: '标题', duration: 5000 }); 2.无icon弹窗 uni.showToast({ title: '标题', icon:'none', duration: 5000 }); 3.加载弹窗 uni.showLoading({ title: '加载中', ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,269
精华内容 10,507
关键字:

小程序弹窗