精华内容
下载资源
问答
  • 主要介绍了微信小程序自定义纯净模态框(弹出框)的实例代码,代码简答易懂,非常不错,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要为大家详细介绍了微信小程序自定义底部弹出框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 1.在你的遮罩层最外层加 catchtouchmove=“noneEnoughPeople” 里面是你的方法名 2.noneEnoughPeople: function () { console.log('遮罩层禁止页面滑动') },

    1.在你的遮罩层最外层加 catchtouchmove=“noneEnoughPeople” 里面是你的方法名
    2.noneEnoughPeople: function () { console.log('遮罩层禁止页面滑动') },

    展开全文
  • 微信小程序 弹出框 自定义 可滚动

    千次阅读 2019-02-19 17:53:20
    思路:小程序自己的模态不能写样式,这是个比较尴尬的情况,这是一个比较小白的解决方案: 在前端写一个视窗,默认让它隐藏, 我这边是用showModel来控制,默认给它false,当点击规则按钮是将showModel的值改为...

    最近在写一个装修的活动,规则是点击按钮弹出加上相应的动画

    首先我们需要一个按钮触发显示(如图,点击详细规则显示规则模态框,图二右边的滚动条在手机上不显示)

    思路:小程序自己的模态框不能写样式,这是个比较尴尬的情况,这是一个比较小白的解决方案:

    在前端写一个视窗,默认让它隐藏,

    我这边是用showModel来控制,默认给它false,当点击规则按钮是将showModel的值改为true,点击关闭按钮将showModel的值改为false

    小程序前端代码(这是触发按钮)

    <!-- 详细规则 -->
      <view style='width:190rpx;height:70rpx;margin-left:76%;padding-top:44%'>
        <button class='form_button'bindtap="openrule">
          <image src='/images/act03.png'style='width:180rpx;height:60rpx;'></image>
          <text class='block font15 white center' decode="{{true}}"  style='width:180rpx;height:60rpx; margin-left:5%; margin-top:-53%;letter-spacing:3rpx;'>详细规则&gt;</text>
        </button>
      </view>

     小程序前端代码(这是模态框),内含关闭按钮(这里是给text一个点击事件当做关闭按钮)

    <view class='tip-content-dialog' wx:if="{{showModal}}">
      <text class='dialogClose block tc font24 white' bindtap='closerule'>×</text>
      <scroll-view class="tip-dialog-view tc bg_rule p_all15 p_b20" scroll-y='true' style='height:85%;padding:30rpx;'>
          <text class='block font26 white tc'style='padding-top:10rpx;'>活动规则</text>
          <view class='p_all10 tj lineH_m'>
            <text class='block font17 white tl'decode="{{true}}" style='padding-top:10rpx;'>活动时间&ensp;:</text>
            <text class='block font15 white tl'style='padding-top:10rpx;padding-left:0rpx;'>{{activity_time}}</text>
            <text class='block font17 white tl'style='padding-top:20rpx;'decode="{{true}}">活动说明&ensp;:</text>
            <text class='block font15 white tj'style='padding-top:10rpx;padding-left:0rpx;'>{{activity_rule}}</text>
          </view>
      </scroll-view>
    </view>

    js

    data: {
        showModal: false,
      },
    
    onLoad: function (options) {
        var that = this;
        //活动规则
        wx.request({
          url: app.d.hostUrl + 'activity.activityConf', //此处是你的接口
          data: {
          },
          success: function (res) {
            //console.log(res.data);  //接口中拿到的数据
            var activity_time = res.data.activity_time;
            var activity_rule = res.data.activity_rule;
            //规则数据显示
            that.setData({
              activity_time: activity_time,
              activity_rule: activity_rule,
            });
          }
        })
      },
    
     // 活动详细规则
      openrule: function () {
        this.setData({   //打开规则模块
          showModal: true
        });
      },
      closerule: function () {
        this.setData({   //关闭规则模块
          showModal: false
        });
      },
    

    样式(样式中为了美观加了弹出动画,可直接使用):

    /* 覆盖button样式 */
    button.form_button{
      background-color:transparent;
      padding:0;
      margin:0;
      display:inline;
      position:static;
      border:0;
      padding-left:0;
      padding-right:0;
      border-radius:0;
      /* font-size:0rpx; */
      color:transparent;
    }
    button.form_button::after{
      content:'';
      width:0;
      height:0;
      -webkit-transform:scale(1);
      transform:scale(1);
      display:none;
      background-color:transparent;
    }
    
    .tip-content-dialog{
      position: fixed;
      display: flex;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,.5);
      z-index: 99999;
    }
    
    .tip-content-dialog .tip-dialog-view{
      width: 80%;
      margin: auto;
      border-radius: 25rpx;
      vertical-align: middle;
      animation: tanchu 400ms ease-in;
      /* overflow: hidden; */
      padding: 20rpx; 
    }
    
    .tip-content-dialog .btn{
      background: #f2f7fa;
    }
    @keyframes tanchu{
      from{
        transform: scale(0,0);
        -webkit-transform: scale(0,0);
      }
      to{
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
      }
    }
    
    .tip-content-dialog .dialogClose{
      position: absolute;
      right:20rpx;
      top: 10rpx;
      width: 60rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
    }
    

     

     

     

    展开全文
  • 点击出发时间 弹出时间选择器: 选择时间后,返回时间: 代码部分:三个页面(index.wxml 、index.wxss 、index.js)关键代码部分 1.index.wxml <view class="iconfloat"> <van-icon class=...

    记录一下遇到的问题~ 第一次记录 先看效果图

    首页面:

    点击出发时间 弹出时间选择器:

     选择时间后,返回时间:

     代码部分:三个页面(index.wxml 、index.wxss 、index.js)关键代码部分

     1.index.wxml

    <view class="iconfloat">
     <van-icon  class="iconpostion" name="clock-o" ></van-icon>
      <van-cell title="出发时间"  is-link value-class="className" value="{{timeValue}}" bind:click="showPopup" />
       <van-popup show="{{ Timeshow }}"  position="bottom">
        <van-datetime-picker type="datetime" value="{{ currentDate }}" title="选择时间" min-date="{{ minDate }}" mmax-date="{{ maxDate }}" bind:cancel="timecancel" bind:confirm="confirmPicker"/>
      </van-popup>
    </view>

     picker插件的详情介绍,请看微信官方介绍:picker | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

     2.index.js

    Page({
      data: {
        timeValue: '请选择时间',
        Timeshow: false,// 初始状态不显示
        currentDate:'',// 当前时间为空
        minDate: new Date().getTime(),// 弹出框初始时间
        maxDate: new Date(2025, 10, 1).getTime(),// 弹出框终止时间
      },
     showPopup(){
        this.setData({ Timeshow: true });//显示时间选择器
      },
      timecancel(event){
        this.setData({ Timeshow: false });// 隐藏时间选择器
      },
      // 确认选择的时间
      confirmPicker (event) {
        this.setData({ 
          Timeshow: false,
          timeValue:this.formatDate(event.detail),// 获取点击的时间
        });
      },
      formatDate(currentDate) {
        currentDate = new Date(currentDate);
        var Y = currentDate.getFullYear();
        return `${Y}/${currentDate.getMonth() + 1}/${currentDate.getDate()} 
        ${currentDate.getHours()}:${currentDate.getMinutes()}`;// 返回选择时间
      },

    3.index.wxss

    .iconfloat{
      display: flex;
      flex-direction: row;
    }
    .van-cell{
        position:relative;display:-webkit-flex;
        display:flex;
        box-sizing:border-box;
        width:100%;
        padding:10px 16px;
        padding:var(--cell-vertical-padding,10px) var(--cell-horizontal-padding,16px);
        font-size:14px;
        font-size:var(--cell-font-size,14px);
        line-height:24px;
        line-height:var(--cell-line-height,24px);
        color:#323233;
        color:var(--cell-text-color,#323233);
        background-color:#fff;
        background-color:var(--cell-background-color,#fff)
    }

    OK~收

    展开全文
  • 微信小程序开发遮罩层弹出框的实现,简单实现,点击弹出遮罩,类似弹出框
  • 微信小程序弹出框详解

    万次阅读 多人点赞 2017-09-29 16:59:37
     //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框   },   //点击按钮痰喘指定的hiddenmodalput弹出框   modalinput:function(){   this.setData({   hiddenmodalput: !this....


    [html]  view plain  copy
    1. <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class="container" class="zn-uploadimg">  
    2.     <button type="primary"bindtap="showok">消息提示框</button>   
    3.     <button type="primary"bindtap="modalcnt">模态弹窗</button>   
    4.     <button type="primary"bindtap="actioncnt">操作菜单</button>   
    5. </view></span>  

    1.消息提示——wx.showToast(OBJECT)


    [html]  view plain  copy
    1. <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;">//show.js  
    2. //获取应用实例    
    3. var app = getApp()    
    4. Page({  
    5.     showok:function() {  
    6.         wx.showToast({  
    7.             title: '成功',  
    8.             icon: 'success',  
    9.             duration: 2000  
    10.         })  
    11.     }  
    12. })  
    13. </span>  

    2.模态弹窗——wx.showModal(OBJECT)



    [html]  view plain  copy
    1. //show.js  
    2. //获取应用实例    
    3. var app = getApp()    
    4. Page({  
    5.     modalcnt:function(){  
    6.         wx.showModal({  
    7.             title: '提示',  
    8.             content: '这是一个模态弹窗',  
    9.             success: function(res) {  
    10.                 if (res.confirm) {  
    11.                 console.log('用户点击确定')  
    12.                 } else if (res.cancel) {  
    13.                 console.log('用户点击取消')  
    14.                 }  
    15.             }  
    16.         })  
    17.     }  
    18. })  




    3.操作菜单——wx.showActionSheet(OBJECT)


    [html]  view plain  copy
    1. //show.js  
    2. //获取应用实例    
    3. var app = getApp()    
    4. Page({  
    5.     actioncnt:function(){  
    6.         wx.showActionSheet({  
    7.             itemList: ['A', 'B', 'C'],  
    8.             success: function(res) {  
    9.                 console.log(res.tapIndex)  
    10.             },  
    11.             fail: function(res) {  
    12.                 console.log(res.errMsg)  
    13.             }  
    14.         })  
    15.     }  
    16. })  




    4.指定modal弹出

       指定哪个modal,可以通过hidden属性来进行选择。

    [html]  view plain  copy
    1. <!--show.wxml-->  
    2. <view class="container" class="zn-uploadimg">  
    3.     <button type="primary"bindtap="modalinput">modal有输入框</button>   
    4. </view>  
    5. <modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">  
    6.     <input type='text'placeholder="请输入内容" auto-focus/>  
    7. </modal>  


    [html]  view plain  copy
    1. //show.js   
    2. //获取应用实例    
    3. var app = getApp()    
    4. Page({  
    5.     data:{  
    6.         hiddenmodalput:true,  
    7.         //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框  
    8.     },  
    9.     //点击按钮痰喘指定的hiddenmodalput弹出框  
    10.     modalinput:function(){  
    11.         this.setData({  
    12.            hiddenmodalput: !this.data.hiddenmodalput  
    13.         })  
    14.     },  
    15.     //取消按钮  
    16.     cancel: function(){  
    17.         this.setData({  
    18.             hiddenmodalput: true  
    19.         });  
    20.     },  
    21.     //确认  
    22.     confirm: function(){  
    23.         this.setData({  
    24.             hiddenmodalput: true  
    25.         })  
    26.     }  
    27.       
    28. })  


    原文地址http://blog.csdn.net/gao_xu_520/article/details/71084162?locationNum=1&fps=1
    展开全文
  • 主要为大家详细介绍了微信小程序实现弹框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 遮罩优先级在弹出框之下; 弹出框内标签的设置; 滚动栏滚动条的隐藏 如何解决? 弹性布局,横向,三者平分整栏; 状态监听点击事件,数据控制hide或者show,通过rgba设置透明度 弹出框设置z-index; 弹性布局...
  • 主要为大家详细介绍了微信小程序商品详情页的底部弹出框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 小程序下拉搜索框弹出菜单动画效果,外观美美哒的demo
  • 本文实例为大家分享了微信小程序实现底部弹出模态的具体代码,供大家参考,具体内容如下 代码: <view class=modals-cancel bindtap=hideModal></view> <view cla
  • 常用的微信小程序弹出框事件

    千次阅读 2019-07-06 10:36:56
    常用的小程序弹出框wx.showToast()wx.showLoading()wx.showModal() wx.showToast() 代码: wx.showToast({ title: ‘提示信息’, }) 参数: title:显示的提示信息,在没有图标的情况下,文本内容可显示两行 icon: ...
  • 主要为大家详细介绍了微信小程序商品详情页底部弹出框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序的底部弹出框,供大家参考,具体内容如下 wxml <!-- 弹出框 start --> <view class=dialog_screen bindtap=hideModal wx:if={{showModalStatus}}></view> <view
  • ## 标题【微信小程序弹出框编写
  • 1、选择器增加标题 2、可以拖动选中 3、可以点击选中 4、拖动以及点击都有动画
  • uniapp 微信小程序 弹出框 带输入框 带html

    千次阅读 热门讨论 2021-04-23 20:04:52
    uniapp 微信小程序 弹出框 带输入框 带html 代码分享 ????记得点赞哦 ???? ????大佬请看???? html: <modal v-if="showModal" class="showModal" title=" " confirm-text="确定" cancel-text="取消" @cancel=...
  • 最近做小程序时,会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴。想要美美地玩,添加点动画还是非常有必要的。下面做一个底部上滑的弹框菜单。
  • 本文实例为大家分享了微信小程序自定义底部弹出框的具体代码,供大家参考,具体内容如下 实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出...
  • 点击弹窗按钮则弹出信息,点击右上角关闭按钮则关闭弹出层,弹出后遮盖层部分不可点击,无上拉下滑操作。用作于提示,展示列表,添加内容等操作。
  • 微信小程序弹出对话框,可通过设置type的值获取用户信息及电话号码。也可用作日常交互对话框。询问等场景
  • 微信小程序开发弹出框实现方法

    千次阅读 2020-12-20 10:48:01
    本文主要和大家分享微信小程序开发弹出框实现方法,本文所分享的代码很清晰,希望能帮助到大家。消息提示框模态弹窗操作菜单1.消息提示——wx.showToast(OBJECT)//show.js//获取应用实例var app = getApp()Page({...
  • 本文通过实例代码给大家介绍了使用微信小程序开发弹出框功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 由于官方API提供的模态只能显示简单的文字,但是在实际应用场景中,我们需要模态上能够显示各种各样的组件和样式,所以,以此为基础模拟一套可以供大家自定义的纯净版的模态,满足大家各式各样的需求。...
  • 微信小程序省市选择控件
  • 在开发微信小程序的时候遇到,输入用户名或者手机号以及地址,手机键盘调起来,会把输入框遮挡。 如图: (此图片来源于网络,如有侵权,请联系删除!...微信小程序开发文档api: https://developers.weixin.qq.com/minipr
  • 微信小程序弹窗,微信小程序页面跳转、弹出框浏览量:2396时间:2019-12-09来源:Reyon_一、页面跳转页面跳转是微信小程序中使用较为频繁并且很重要的功能之一,页面跳转一般是通过点击按钮或者文本区域后需要进行的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,025
精华内容 7,210
关键字:

微信小程序弹出框

微信小程序 订阅