精华内容
下载资源
问答
  • 本文通过实例代码给大家介绍了使用微信小程序开发弹出框功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序底部弹出框

    万次阅读 2018-07-16 11:17:45
    微信小程序的底部弹出框 wxml <!-- 弹出框 start --> <view class="dialog_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></...

    微信小程序的底部弹出框
    这里写图片描述

    wxml

    <!-- 弹出框 start -->
    <view class="dialog_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
    <view animation="{{animationData}}" class="dialog_attr_box" wx:if="{{showModalStatus}}">
      <view style='background:white;position: relative;overflow: hidden;'>
      <view class='dialog_title'>选择系列</view>
        <view wx:for="{{list}}" wx:key="name" class='dialog_content'>
            <view class="{{item.status==0?'type_nor':'type_pre'}}" bindtap='typeClick' data-index='{{index}}'>{{item.txt}}</view>
        </view>
      </view>
    </view>
    <!-- 弹出框 end -->

    wxss

    
    /* dialog start */
    
    .dialog_screen {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: #000;
      opacity: 0.2;
      overflow: hidden;
      z-index: 1000;
      color: #fff;
    }
    
    .dialog_attr_box {
      width: 100%;
      overflow: hidden;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 2000;
      background: #fff;
      padding-top: 1px;
    }
    
    .dialog_title {
      font-size: 16px;
      height: 30px;
      display: flex;
      align-items: center;
      padding: 10px;
      background: #80cbc4;
      color: white;
    }
    
    .dialog_content {
      position: relative;
      float: left;
      padding: 10px 10px;
      width: 25%;
      box-sizing: border-box;
    }
    
    /* dialog end */

    js

    var postData = require('../../../data/StoreData.js');
    var typeList = postData.postListData;
    Page({
      data: {
        list: typeList
      },
      onLoad: function(options) {
        var id = options.id; //页面跳转传过来的值
        //初始化默认一部分数据已选中
        for (var i = 0; i < typeList.length; i++) {
          if (i % 2 == 0) {
            typeList[i].status = 0;
          } else {
            typeList[i].status = 1;
          }
        }
        this.setData({
          list: typeList
        });
      },
      showModal: function() {
        // 显示遮罩层
        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() {
        // 隐藏遮罩层
        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)
      },
      typeClick: function(e) {
        var index = e.target.dataset.index;
        for (var i = 0; i < typeList.length; i++) {
          if (i == index) {
            var curStatus = typeList[i].status;
            if(curStatus == 0){
              typeList[i].status = 1;
            }else{
              typeList[i].status=0;
            }
            break;
          }
        }
        this.setData({
          list: typeList
        });
      }
    })

    data

    
    var list = [{
        "id": 1,
        "txt": "AA"
      },
      {
        "id": 2,
        "txt": "BB"
      },
      {
        "id": 3,
        "txt": "CC"
      },
      {
        "id": 4,
        "txt": "DD"
      },
      {
        "id": 5,
        "txt": "EE"
      },
      {
        "id": 6,
        "txt": "FF"
      },
      {
        "id": 7,
        "txt": "RR"
      },
      {
        "id": 8,
        "txt": "HH"
      },
      {
        "id": 9,
        "txt": "KK"
      },
      {
        "id": 10,
        "txt": "WW"
      }
    ]
    module.exports = {
      postListData: list
    }
    展开全文
  • 微信小程序点击事件之后实现从底部弹出一个新的页面 bindtap实现传递参数,循环展示弹出框的主要信息

    点击事件之后,从底部弹出一个新的框显示详细信息,大致效果如下:
    在这里插入图片描述

    当点击某个测试块时,要实现从底部弹出一个新的页面显示该测试的具体信息

    页面主要代码部分

    <!--屏幕背景变暗的背景  -->
    <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
    <!--弹出框  -->
    <scroll-view scroll-y="true" style="height:100vh;"
        <block wx:for="{{data}}" wx:key="index">
          <!--该部分循环展示测试块-->
        </block>
        <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
          <!--该部分弹出页面的主要信息-->
        </view>
      </view>
    </scroll-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 {
      height: 700rpx;
      width: 100%;
      overflow: hidden;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 2000;
      background: #fff;
      padding-top: 20rpx;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
    }
    
    clickme: function () {
        this.showModal()
      },
      // 显示对话框
      showModal: function () {
        // 显示遮罩层
        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 () {
        // 隐藏遮罩层
        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)
      },
    

    1、遇到的问题:
    在做这个功能的时候有遇到一个问题就是,一开始是把弹出框的代码部分放在block循环内,这样导致了一个问题就是,不管我点击哪一个测试块,弹出框显示的主要信息都是最后一个测试块的信息,这就出现了问题,但是如果把代码部分放在block之外的话一开始并不知道如何实现通过点击不同的测试块而实现显示不同的信息。
    2、解决方案:
    增设一个数据列表,当点击不同的测试块时实现将该测试块的所有信息绑定到新的数据列表中,通过bindtap实现传递参数(如何通过bindtap实现传递参数),在获取数据之后,再通过{{}}将数据展示出来即可。

    开发中遇到的一个小坑,记录一下

    展开全文
  • 微信小程序弹出框 上代码 wxml <!-- 点击触发事件--> <image class="pic" bindtap='showRule' src="../../image/jiantou-1.png"></image> <!-- 弹出层 --> <view class="bg" style='...

    微信小程序弹出框

    在这里插入图片描述
    上代码
    wxml

    <!-- 点击触发事件-->
    <image class="pic" bindtap='showRule' src="../../image/jiantou-1.png"></image>
    <!-- 弹出层 -->
    <view class="bg" style='display:{{display}}'></view>
      <view class="poupt {{isRuleTrue?'isRuleShow':'isRuleHide'}}">
        <view class="intpok">确认要离开预定页面吗?</view>
        <view class="textinpot">您的订单还未完成预定,请尽快完成。</view>
        <view class="ttexk">
          <view class="ttextone" bindtap='okk'>确认离开</view>
          <view class="ttexttwo" bindtap='hideRule'>继续预定</view>
        </view>
      </view>
    

    wxcss

    /* 弹出框 */
    .poppt{
      width: 750rpx;
      height: 1958rpx;
      opacity: 0.38;
      background: #333333;
    }
    .poupt{
      z-index: 99999;
      position: absolute;
      width: 598rpx;
      height: 300rpx;
      opacity: 1;
      background: #ffffff;
      border-radius: 20rpx;
      top: 35%;
      left: 10%;
      text-align: center;
    }
    .isRuleShow{
      display: block;
     }
     .isRuleHide{
      display: none;
     }
     .intpok{
      font-size: 36rpx;
      font-weight: 800;
      color: #333333;
      margin-top: 30rpx;
    
     }
     .textinpot{
      font-size: 28rpx;
      margin-top: 30rpx;
    
      font-weight: 800;
      color: #666666;
     }
     .ttexk{
       width: 70%;
      height: 80rpx ;
      display: flex;
      justify-content: space-between;
      margin: auto;
      margin-top: 30rpx;
    
     }
     .ttextone{
    font-size: 32rpx;
    font-weight: 400;
    color: #666666;
    line-height: 70rpx;
     }
     .ttexttwo{
      width: 200rpx;
      height: 70rpx;
      opacity: 1;
      background: linear-gradient(180deg,#ff5447, #ff2217);
      border-radius: 16rpx;
      font-weight: 400;
      color: #f8f8f8;
      font-size: 32rpx;
      text-align: center;
      line-height: 70rpx;
     }
     .bg {
      display: none;
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      background-color: black;
      z-index: 1001;
      -moz-opacity: 0.7;
      opacity: 0.70;
      filter: alpha(opacity=70);
    }
    

    js

        //弹出框
        data:{
         display:'',
        isRuleTrue:false,
        showModal: false, //false关闭模态框  true开启模态框
        }
     showRule: function () {
      this.setData({
       isRuleTrue: true,
        display: "block"
      })
      },
      //留在页面
     hideRule: function () {
      this.setData({
       isRuleTrue: false,
       display: "none"
      })
      },
      //确认离开
      okk(){
        wx.navigateBack()
      }
    

    大家一起学习 希望对大家有用 点个赞

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

    2020-02-12 15:13:29
    1.微信小程序开发——弹出框 1).消息提示——wx.showToast(OBJECT) //获取应用实例 var app = getApp() Page({ showok:function() { wx.showToast({ title: ‘成功’, icon: ‘success’, duration: 2000 }) } }) 2...

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

    在这里插入图片描述

    //show.js
    //获取应用实例
    var app = getApp()
    Page({
    showok:function() {
    wx.showToast({
    title: ‘成功’,
    icon: ‘success’,
    duration: 2000
    })
    }
    })

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

    在这里插入图片描述

    //show.js
    //获取应用实例
    var app = getApp()
    Page({
    modalcnt:function(){
    wx.showModal({
    title: ‘提示’,
    content: ‘这是一个模态弹窗’,
    success: function(res) {
    if (res.confirm) {
    console.log(‘用户点击确定’)
    } else if (res.cancel) {
    console.log(‘用户点击取消’)
    }
    }
    })
    }
    })

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

    在这里插入图片描述
    //show.js
    //获取应用实例
    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)
    }
    })
    }
    })

    展开全文
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 效果图: 代码 wxml <view wx:if='{{showModal}}'> <view class='mask_layer' bindtap='modal_click_Hidden' /> <...
  • 微信小程序弹出框

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

    千次阅读 2019-08-08 19:38:31
    微信小程序点击弹出输入框 第一次写博客,我决定不要太old school。 let’s get it!最近在学习微信开发,刚接触到微信小程序,自己尝试着做了一个简单的小程序,过程中发现类似web开发中的点击弹出模态输入框的功能...
  • 主要介绍了微信小程序自定义弹出模态禁止底部滚动效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要为大家详细介绍了微信小程序自定义底部弹出框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文通过实例代码给大家介绍了js开发中微信小程序自定义底部弹出框效果,非常不错,具有参考借鉴价值,需要的朋友参考下
  • 主要介绍了微信小程序自定义纯净模态框(弹出框)的实例代码,代码简答易懂,非常不错,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序的底部弹出框,供大家参考,具体内容如下 wxml <!-- 弹出框 start --> <view class=dialog_screen bindtap=hideModal wx:if={{showModalStatus}}></view> <view
  • 本文实例为大家分享了微信小程序自定义底部弹出框的具体代码,供大家参考,具体内容如下 实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出...
  • 微信小程序开发—(五)弹出框

    万次阅读 多人点赞 2017-05-02 17:31:33
    消息提示 模态弹窗 操作菜单 1.消息提示——wx.showToast(OBJECT) //show.js //获取应用实例 var app = getApp() Page({ showok:function() { wx.showToast({ title: '成功', icon: '...
  • 微信小程序之自定义底部弹出框动画,供大家参考,具体内容如下 最近做小程序时,会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴。想要美美地玩,添加点动画还是非常有必要...
  • 微信小程序弹出框

    2019-09-14 19:44:40
    微信小程序之----消息提示toast 微信小程序之----加载中提示loading 转载于:https://my.oschina.net/u/3512111/blog/1093...
  • 主要为大家详细介绍了微信小程序商品详情页底部弹出框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 常用的微信小程序弹出框事件

    千次阅读 2019-07-06 10:36:56
    常用的小程序弹出框wx.showToast()wx.showLoading()wx.showModal() wx.showToast() 代码: wx.showToast({ title: ‘提示信息’, }) 参数: title:显示的提示信息,在没有图标的情况下,文本内容可显示两行 icon: ...
  • 微信小程序开发遮罩层弹出框的实现,简单实现,点击弹出遮罩,类似弹出框
  • 遮罩优先级在弹出框之下; 弹出框内标签的设置; 滚动栏滚动条的隐藏 如何解决? 弹性布局,横向,三者平分整栏; 状态监听点击事件,数据控制hide或者show,通过rgba设置透明度 弹出框设置z-index; 弹性布局...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,987
精华内容 6,794
关键字:

微信小程序点击弹出框

微信小程序 订阅