精华内容
下载资源
问答
  • 主要介绍了微信小程序自定义纯净模态框(弹出框)的实例代码,代码简答易懂,非常不错,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要为大家详细介绍了微信小程序商品详情页的底部弹出框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了微信小程序自定义弹出模态禁止底部滚动效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 小程序弹出框详解

    千次阅读 2018-12-05 21:38:38
    小程序弹出框详解 qjlx: function() { var itemList = ['病假', '事假']; wx.showActionSheet({ itemList: itemList, success: function(res) { console.log(res); console.log(itemList[r...

    标题图

    小程序弹出框详解

    qjlx: function() {
        var itemList = ['病假', '事假'];
        wx.showActionSheet({
          itemList: itemList,
          success: function(res) {
            console.log(res);
            console.log(itemList[res.tapIndex]);
          },
          fail: function(res) {
            console.log(res.errMsg);
          }
        })
      },
    

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

    效果

    效果

    //获取应用实例    
    var app = getApp()    
    Page({  
        actioncnt:function(){  
            wx.showActionSheet({  
                itemList: ['A', 'B', 'C'],  
                success: function(res) {  
                    console.log(res.tapIndex)  
                },  
                fail: function(res) {  
                    console.log(res.errMsg)  
                }  
            })  
        }  
    })  
    

    弹出框

    弹出框

    <view class='item'>
        登录密码
        <view class='bk'>
          <input class="textarea" placeholder="{{password}}" value='{{password}}' bindinput="password" maxlength='100' auto-height disabled/>
        </view>
    
        <button class='btn' bindtap='dlmm'>修改</button>
        <modal hidden="{{hiddenmodalput}}" title="修改密码" confirm-text="提交" cancel-text="取消" bindcancel="cancelM" bindconfirm="confirmM">
          <input bindinput='ipsd' type='text' placeholder="请输入原密码..." auto-focus/>
          <input bindinput='newipsd' type='password' placeholder="请输入新密码..." />
        </modal>
    
      </view>
    
    // js
    // 获取登录密码:
      password: function(e) {
        this.setData({
          password: e.detail.value,
        })
        console.log("获取登录密码:" + this.data.password);
      },
    // 修改登录密码
      dlmm: function(e) {
        this.setData({
          hiddenmodalput: !this.data.hiddenmodalput
        })
      },
      cancelM: function(e) {
        this.setData({
          hiddenmodalput: true,
        })
      },
    
      confirmM: function(e) {
        var that = this;
        console.log("原密码" + that.data.psd + "新密码" + that.data.newpsd);
        that.setData({
          hiddenmodalput: true,
        })
        wx.request({
          url: '',
          method: 'POST',
          header: {
            'Authorization': 'Bearer' + wx.getStorageSync('token'),
          },
          success(res) {
            if (res.data.code == 0) {
              wx.showToast({
                title: '保存失败',
                icon: 'success',
                duration: 500
              })
            } else {
              that.getShowToast();
            }
          }
        })
      },
    
      ipsd: function(e) {
        this.setData({
          psd: e.detail.value
        })
      },
      newipsd: function(e) {
        this.setData({
          newpsd: e.detail.value
        })
      },
    

    指定modal弹出

    效果

    <!--show.wxml-->  
    <view class="container" class="zn-uploadimg">  
        <button type="primary"bindtap="modalinput">modal有输入框</button>   
    </view>  
    <modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">  
        <input type='text'placeholder="请输入内容" auto-focus/>  
    </modal> 
    
    //获取应用实例    
    var app = getApp()    
    Page({  
        data:{  
            hiddenmodalput:true,  
            //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框  
        },  
        //点击按钮痰喘指定的hiddenmodalput弹出框  
        modalinput:function(){  
            this.setData({  
               hiddenmodalput: !this.data.hiddenmodalput  
            })  
        },  
        //取消按钮  
        cancel: function(){  
            this.setData({  
                hiddenmodalput: true  
            });  
        },  
        //确认  
        confirm: function(){  
            this.setData({  
                hiddenmodalput: true  
            })  
        }  
          
    })  
    

    效果

    //获取应用实例  
    var app = getApp()  
    Page({
    	actioncnt:function(){
    		wx.showActionSheet({
    			itemList: ['A', 'B', 'C'],
    			success: function(res) {
    				console.log(res.tapIndex)
    			},
    			fail: function(res) {
    				console.log(res.errMsg)
    			}
    		})
    	}
    })
    
    <!--.wxml-->
    <view class="container" class="zn-uploadimg">
        <button type="primary"bindtap="modalinput">modal有输入框</button> 
    </view>
    <modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">
        <input type='text'placeholder="请输入内容" auto-focus/>
    </modal>
    
    //.js 
    //获取应用实例  
    var app = getApp()  
    Page({
        data:{
            hiddenmodalput:true,
            //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框
        },
    
        //点击按钮痰喘指定的hiddenmodalput弹出框
        modalinput:function(){
            this.setData({
               hiddenmodalput: !this.data.hiddenmodalput
            })
        },
        //取消按钮
        cancel: function(){
            this.setData({
                hiddenmodalput: true
            });
        },
        //确认
        confirm: function(){
            this.setData({
                hiddenmodalput: true
            })
        }
    })
    

    达叔小生:往后余生,唯独有你
    You and me, we are family !
    90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
    简书博客: 达叔小生
    https://www.jianshu.com/u/c785ece603d1

    结语

    • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
    • 小礼物走一走 or 点赞
    展开全文
  • 主要为大家详细介绍了微信小程序自定义底部弹出框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序 弹出框 自定义 可滚动

    千次阅读 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;
    }
    

     

     

     

    展开全文
  • 主要为大家详细介绍了微信小程序商品详情页底部弹出框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序开发遮罩层弹出框的实现,简单实现,点击弹出遮罩,类似弹出框
  • uniapp 微信小程序 弹出框 带输入框 带html

    千次阅读 热门讨论 2021-04-23 20:04:52
    uniapp 微信小程序 弹出框 带输入框 带html 代码分享 ????记得点赞哦 ???? ????大佬请看???? html: <modal v-if="showModal" class="showModal" title=" " confirm-text="确定" cancel-text="取消" @cancel=...

    uniapp 微信小程序 弹出框 带输入框 带html

    代码分享

    👍记得点赞哦 😄

    👇大佬请看👇

    • html:
    <modal v-if="showModal" class="showModal" title="  " confirm-text="确定" cancel-text="取消" @cancel="cancelWin" @confirm="Review">
        <span>拒绝原因:</span>
        <textarea class="RefuseText" placeholder="请填写具体原因" v-model="contentPop" />
    </modal>
    // (我没有填写title是因为 鼠标悬浮会有提示  //  各位可以试试 )
    
    • js:
    // 点击取消
    cancelWin() {  //取消
        this.contentPop = ''// 清空数据
        this.showModal = false// 关闭弹框
    },
    
    // 点击确定
    Review(){
            this.showModal = true // 打开弹框
            if(this.contentPop.length < 1) {  //是否输入内容
                uni.showToast({
                    title: '请填写内容!',
                    icon: 'none',
                })
                return
            }
        console.log(this.contentPop)//;逻辑处理
        },
    
    • css:
             .showModal span{
                 color:#565656;
             }
            .RefuseText {
             height: 80rpx;
             width: 94%;
             border: 1px solid;
             margin-top: 10rpx; 
             padding: 8rpx 14rpx;
             border-radius: 10rpx;
            }
    

    效果:
    在这里插入图片描述

    都看👓完了,就👍1️⃣👇吧!
    ☺ 欢迎评论探讨 ☺

    展开全文
  • 小程序弹出框的穿透问题

    千次阅读 2019-06-24 15:59:38
    如果开发的过程中遇到滑动弹出框时,弹出框下面的内容进行滑动,解决这个问题的最直接的方法就是在页面上添加事件:catchtouchmove="return"

    如果开发的过程中遇到滑动弹出框时,弹出框下面的内容进行滑动,解决这个问题的最直接的方法就是在页面上添加事件:catchtouchmove="return"

    展开全文
  • 微信小程序弹出框详解

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

    千次阅读 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
  • 主要介绍了微信小程序 自定义消息提示的相关资料,wx.showToast(OBJECT)接口调用,实现改功能,需要的朋友可以参考下
  • 微信小程序 弹框和模态实现代码 实现效果图: 实现代码:  <view class=mask bindtap=closeModal></view> /*模态*/ .wxapp-modal{ width: 100%; height: 100%; position: fixed; top: 0px; ...
  • 主要介绍了钉钉小程序组件之自定义模态(弹窗封装实现)的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本文通过实例代码给大家介绍了使用微信小程序开发弹出框功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文。 html <view class=commodity_screen bindtap=hideModal wx:if={{showModalStatus}}></view> ...
  • 本文实例为大家分享了微信小程序实现底部弹出模态的具体代码,供大家参考,具体内容如下 代码: <view class=modals-cancel bindtap=hideModal></view> <view cla
  • 由于官方API提供的模态只能显示简单的文字,但是在实际应用场景中,我们需要模态上能够显示各种各样的组件和样式,所以,以此为基础模拟一套可以供大家自定义的纯净版的模态,满足大家各式各样的需求。...
  • 小程序下拉搜索框弹出菜单动画效果,外观美美哒的demo
  • 遮罩优先级在弹出框之下; 弹出框内标签的设置; 滚动栏滚动条的隐藏 如何解决? 弹性布局,横向,三者平分整栏; 状态监听点击事件,数据控制hide或者show,通过rgba设置透明度 弹出框设置z-index; 弹性布局...
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 效果图: 代码 wxml <view wx:if='{{showModal}}'> <view class='mask_layer' bindtap='modal_click_Hidden' /> <...
  • 微信小程序弹出对话框,可通过设置type的值获取用户信息及电话号码。也可用作日常交互对话框。询问等场景
  • 微信小程序动画之消息框弹出,供大家参考,具体内容如下 上图 js: Page({ data: { showModalStatus: false }, powerDrawer: function(e) { var currentStatu = e.currentTarget.dataset.statu; this.util...
  • 最近做小程序时,会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴。想要美美地玩,添加点动画还是非常有必要的。下面做一个底部上滑的弹框菜单。
  • github地址:https://github.com/sajiang/popup-for-weixin 可以查看完整的组件代码和使用方法。 效果: ...来控制popUp的弹出和关闭 3.bind:closepopup="modalClosed"方法 modalClo...
  • 小程序中自定义弹出框

    千次阅读 2019-06-22 15:04:53
    小程序中自定义弹出框:https://blog.csdn.net/haibo0668/article/details/80675895

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 180,409
精华内容 72,163
关键字:

小程序弹出框