精华内容
下载资源
问答
  • 主要为大家详细介绍了微信小程序自定义底部弹出框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了微信小程序商品详情页底部弹出框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 最近做小程序时,会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴。想要美美地玩,添加点动画还是非常有必要的。下面做一个底部上滑的弹框菜单。
  • 微信小程序底部弹出框

    万次阅读 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 <!-- 弹出框 start --> <view class=dialog_screen bindtap=hideModal wx:if={{showModalStatus}}></view> <view
  • 本文实例为大家分享了微信小程序实现底部弹出模态的具体代码,供大家参考,具体内容如下 代码: <view class=modals-cancel bindtap=hideModal></view> <view cla
  • 本文实例为大家分享了微信小程序自定义底部弹出框的具体代码,供大家参考,具体内容如下 实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出...
  • 实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文。 html <view class=commodity_screen bindtap=hideModal wx:if={{showModalStatus}}></view> ...
  • 主要介绍了微信小程序自定义弹出模态禁止底部滚动效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要为大家详细介绍了微信小程序商品详情页的底部弹出框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 遮罩优先级在弹出框之下; 弹出框内标签的设置; 滚动栏滚动条的隐藏 如何解决? 弹性布局,横向,三者平分整栏; 状态监听点击事件,数据控制hide或者show,通过rgba设置透明度 弹出框设置z-index; 弹性布局...
  • 在Android开发中,经常需要我们自定义对话框或者底部弹出框,用于满足客户的需求。在微信小程序中,也是如此。 一、自定义对话框 (1)列表形式。 WXML文件代码如下: <!--支付方式对话框--> <view...

    在Android开发中,经常需要我们自定义对话框或者底部弹出框,用于满足客户的需求。在微信小程序中,也是如此。

    一、自定义对话框

    (1)列表形式。

    WXML文件代码如下:

    <!-- 支付方式对话框 -->

    <view class="fadeIn" wx:if="{{isShowPayTypeDialog}}">

      <view class="weui-mask"></view>

      <view class="weui-dialog">

        <text class="border_bottom p_item_h font_size_30" bindtap="dialogItemClick" data-index="0">线上支付</text>

        <text class="p_item_h font_size_30 border_bottom" bindtap="dialogItemClick" data-index="1">线下支付</text>

        <text class="p_item_h font_size_30 font_color_gray" bindtap="dialogItemClick" data-index="-1">取消</text>

      </view>

    </view>

    JS文件代码如下:

      /* 选择支付方式 */

      dialogItemClick: function (event) {

        var index = parseInt(event.currentTarget.dataset.index);

        if (index >= 0) {

          this.setData({payType: this.data.payTypeList[index]});

        }

        this.setData({isShowPayTypeDialog: false});

        this.setData({isShowInput: true});

      },

     

      /* 显示选择支付方式对话框 */

      showPayTypeDialog: function (params) {

        this.setData({isShowPayTypeDialog: true});

        this.setData({isShowInput: false});

      },

     

    二、自定义底部弹出框

    WXML文件代码如下:

    <!-- 自定义底部弹出框 -->

    <view class="fadeIn" wx:if="{{isShowBottomSheet}}">

      <view class="weui-mask" bindtap="close"></view>

        <view class="weui-half-screen-dialog bg_white" style="padding-bottom: 120rpx;">

          <view class="weui-half-screen-dialog__hd__main">

            <view class="container_v">

              <!-- 价格、数量 -->

              <view class="container_h border_bottom sheetdialog_layout_info align_center">

                <view class="grow_0">

                  <image src="/images/dangao1.jpg" style="width: 120rpx; height: 120rpx;"></image>

                </view>

                <view class="container_v grow_1" style="height: 120rpx; padding-left: 20rpx">

                  <text class="sheetdialog_layout_info_price">¥168</text>

                  <text class="sheetdialog_layout_info_num">库存:10件</text>

                </view>

                <view class="grow_0">

                  <image src="/images/icon_close.png" style="width: 30rpx; height: 30rpx;" bindtap="hideBottomSheet"></image>

                </view>

              </view>

              <!-- 规格尺寸 -->

              <view class="container_v border_bottom">

                <text style="font-size: 30rpx;padding-top: 20rpx;">尺寸</text>

                <view class="container_h" style="font-size: 30rpx;padding-top: 20rpx;padding-bottom: 40rpx;">

                  <text class="{{typeSizeIndex === 0 ? 'text_type_select':'text_type'}}" bindtap="onTypeSizeSelect" data-index="0">8寸加高乳脂</text>

                  <text class="{{typeSizeIndex === 1 ? 'text_type_select':'text_type'}}" style="margin-left: 30rpx;" bindtap="onTypeSizeSelect" data-index="1">8寸加高乳酸菌</text>

                </view>

              </view>

              <!-- 数量 -->

              <view class="container_h align_center" style="font-size: 30rpx;padding-top: 40rpx;padding-bottom: 40rpx;">

                <text class="grow_1">数量</text>

                <!-- 加减模块 -->

                <view class="container_h grow_0">

                  <view class="tv_num_ar" bindtap="numReduce">

                    <text>-</text>

                  </view>

                  <view class="tv_num">

                    <text>{{orderNum}}</text>

                  </view>

                  <view class="tv_num_ar" bindtap="numAdd">

                    <text>+</text>

                  </view>

                </view>

                <text class="grow_0 btn_order" bindtap="selectTypeComplete">确定</text>

              </view>

            </view>

          </view>

        </view>

    </view>

     

    展开全文
  • 微信小程序之自定义底部弹出框动画 最近做小程序时,会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴。想要美美地玩,添加点动画还是非常有必要的。下面做一个底部上滑的...

    微信小程序之自定义底部弹出框动画

    最近做小程序时,会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴。想要美美地玩,添加点动画还是非常有必要的。下面做一个底部上滑的弹框。
    在这里插入图片描述
    wxml

    <view class="modals modals-bottom-dialog" hidden="{{hideModal}}">
        <view class="modals-cancel" bindtap="hideModal"></view>
        <view class="bottom-dialog-body bottom-pos" animation="{{animationData}}"></view>
    </view>
    
    <button bindtap="showModal">点我</button>
    

    wxss

    /*模态框*/
    .modals {
      position: fixed;
      z-index: 999;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    
    .modals-cancel {
      position: absolute;
      z-index: 1000;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, .5);
    }
    
    .bottom-dialog-body {
      position: absolute;
      z-index: 10001;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 30rpx;
      height: 800rpx;
      background-color: #fff;
    }
    
    /*动画前初始位置*/
    .bottom-pos {
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
    }
    

    js

    Page({
        data:{
          hideModal:true, //模态框的状态  true-隐藏  false-显示
          animationData:{},//
        },
    
      // 显示遮罩层
        showModal: function () {
        var that=this;
        that.setData({
          hideModal:false
        })
        var animation = wx.createAnimation({
          duration: 600,//动画的持续时间 默认400ms   数值越大,动画越慢   数值越小,动画越快
          timingFunction: 'ease',//动画的效果 默认值是linear
        })
        this.animation = animation 
        setTimeout(function(){
          that.fadeIn();//调用显示动画
        },200)   
      },
    
      // 隐藏遮罩层
      hideModal: function () {
        var that=this; 
        var animation = wx.createAnimation({
          duration: 800,//动画的持续时间 默认400ms   数值越大,动画越慢   数值越小,动画越快
          timingFunction: 'ease',//动画的效果 默认值是linear
        })
        this.animation = animation
        that.fadeDown();//调用隐藏动画   
        setTimeout(function(){
          that.setData({
            hideModal:true
          })      
        },720)//先执行下滑动画,再隐藏模块
        
      },
    
      //动画集
      fadeIn:function(){
        this.animation.translateY(0).step()
        this.setData({
          animationData: this.animation.export()//动画实例的export方法导出动画数据传递给组件的animation属性
        })    
      },
      fadeDown:function(){
        this.animation.translateY(300).step()
        this.setData({
          animationData: this.animation.export(),  
        })
      }, 
    })
    
    展开全文
  • 可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属性的弹出框。只需要把内容替换自己需要的即可。 1. wxml代码 <view class="wrap"> <view bindtap="showModal"> ...
  • 微信小程序底部弹出模态

    千次阅读 2019-06-26 14:31:30
    承接小程序开发,web开发 wxml: <view class="modals modals-bottom-dialog" hidden="{{hideModal}}"> <view class="modals-cancel" bindtap="hideModal"></view> <...
  • //动画的持续时间 默认600ms 数值越大,动画越慢 数值越,动画越快 timingFunction : 'ease' , //动画的效果 默认值是linear } ) this . animation = animation setTimeout ( function ( ) { ...
  • 微信小程序底部弹出窗口

    千次阅读 2018-08-13 15:41:32
    电商项目中商品详情页,加入购物车或者下单时可以选择商品属性的弹出框,通过设置view的平移动画,达到从底部弹出的样式 1.js代码(一般情况下只调用显示对话框的函数,当点击对话框外部的时候,对话框可以消失) /...
  • 效果: 目录结构
  • 1、选择器增加标题 2、可以拖动选中 3、可以点击选中 4、拖动以及点击都有动画
  • 微信小程序弹出对话框,可通过设置type的值获取用户信息及电话号码。也可用作日常交互对话框。询问等场景
  • 微信小程序之自定义底部弹出框动画,供大家参考,具体内容如下 最近做小程序时,会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴。想要美美地玩,添加点动画还是非常有必要...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,023
精华内容 1,609
关键字:

微信小程序底部弹出框

微信小程序 订阅