微信小程序实现底部弹出框封装

 更新时间:2022年07月21日 10:09:06   作者:常安cc  
这篇文章主要为大家详细介绍了微信小程序底部弹出框封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序底部弹出框封装的具体代码,供大家参考,具体内容如下

<!--index.wxml-->
<view>
  <button style="margin-top: 300px;" catchtap="changeRange2">点击唤起弹窗222</button>

  <!-- 弹框 -->
  <dialogA id='dialog' catchtouchmove="preventTouchMove" bind:customEventHandler="customEvent"></dialogA>
</view>
{
  "usingComponents": {
    "dialogA":"/components/dialogA/dialog",
    "dialog":"/components/dialog/dialog"
  }
}
// index.js
// 获取应用实例
const app = getApp()

Page({

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        this.popup = this.selectComponent("#dialog"); //获取
    },
    
    
    // 调用子组件事件---弹窗2
    changeRange2(e) {
        var _this = this;
        _this.popup.changeRange(); //调用子组件内的函数

    },
    
})

<!--components/dialog/dialog.wxml-->

<view class="half-screen" catchtouchmove="preventTouchMove">
    <!--屏幕背景变暗的背景  -->
    <view class="background_screen" catchtap="hideModal" wx:if="{{showModalStatus}}"></view>
    <!--弹出框  -->
    <view animation="{{animationData}}" class="attr_box" wx:if="{{showModalStatus}}">
        <view class="dialog-box">
            <view class="dialog-head">
                <view class="dialog-title">商品类型</view>
                <view class="close2ImgBox">
                    <image src="/img/close2.png" class="close2Img"  catchtap="hideModal"></image>
                </view>
            </view>
            <view class='dialog-content'>
                <view class="select-box">
                    <view wx:for="{{tabData.val}}" wx:key="index" class="select-item {{index==tabData.toValIndex?'selectedItem':''}}" data-dialogid="{{index}}" catchtap="getValueTap">{{item}}</view>
                </view>
                <view class="btnBox">
                    <button class="btn" catchtap="hideModal">确认</button>
                </view>
            </view>

        </view>
    </view>
</view>
/* components/dialog/dialog.wxss */
/*模态框*/
/*使屏幕变暗  */
.background_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}

/*对话框 */
.attr_box {
  background: #FFFFFF;
  opacity: 1;
  /* border-radius: 0px 0px 0px 0px; */
  /* height: 500rpx; */
  height: auto;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  /* background: rgba(66, 66, 66, .6); */
  padding-top: 40rpx;
  padding-bottom: 90rpx;
  box-sizing: border-box;

}


.dialog-box {
  width: 100%;
  height: 100%;
  /* background-color: pink; */
}

.dialog-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 60rpx;
  /* background-color: rgb(215, 255, 192); */
}

.dialog-title {
  width: 80%;
  height: 100%;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  /* line-height: 40rpx; */
  color: rgba(0, 0, 0, .9);
  /* background-color: rgb(255, 254, 192); */

  display: flex;
  align-items: center;
  justify-content: center;
}

.close2ImgBox {
  width: 10%;
  height: 100%;
  display: flex;
  align-items: center;
}

.close2Img {
  width: 44rpx;
  height: 44rpx;
}

.dialog-content {
  height: calc(100% - 60rpx);
  /* background-color: rgb(192, 237, 255); */
  box-sizing: border-box;
  padding: 40rpx 0;
}

/* 主体内容 */
.select-box {
  /* background-color: rgb(240, 230, 146); */
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  box-sizing: border-box;
  padding: 10rpx;
  padding: 0 0 30rpx 0rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.select-item {
  width: 80%;
  height: 88rpx;
  line-height: 68rpx;
  background: #f6f5f8;
  opacity: 1;
  border-radius: 40rpx;
  text-align: center;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #151521;
  /* margin-right: 10rpx; */
  margin-bottom: 32rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selectedItem {
  background: #ff5050;
  color: #fff;
  border: 1px solid #ff5050;
}

.btnBox {
  width: 100%;
  /* height: auto; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  width: 90% !important;
  height: 88rpx;
  background: #FF3B3B;
  opacity: 1;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  opacity: 1;
  border-radius: 48rpx;
  border: none;
  outline: none;
  position: absolute;
  bottom: 50rpx;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  justify-content: center;
  align-items: center;
}
// // components/dialog/dialog.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {},

    /**
     * 组件的初始数据
     */
    data: {
        //弹窗显示控制
        showModalStatus: false,
        // isShowDialog: false, //是否显示提示控件组件

        // 点击添加的数据
        tabData: {
            // title: '拒绝发货',
            val: ['库存', '跨境现货', '爆款', '新品'],
            toValIndex: null,
        }, //需要传递的值
    },
    /**
     * 组件的方法列表
     */
    methods: {
        //点击显示底部弹出
        changeRange: function () {
            this.showModal();
            console.log('我是弹窗打开----');
        },

        //底部弹出框
        showModal: function () {
            // 背景遮罩层
            var animation = wx.createAnimation({
                duration: 50,
                timingFunction: "linear",
                delay: 0
            })
            //this.animation = animation
            animation.translateY(50).step()
            this.setData({
                animationData: animation.export(),
                showModalStatus: true
            })
            setTimeout(function () {
                animation.translateY(0).step()
                this.setData({
                    animationData: animation.export()
                })
            }.bind(this), 50)
        },

        //点击背景面任意一处时,弹出框隐藏
        hideModal: function (e) {
            //弹出框消失动画
            var animation = wx.createAnimation({
                duration: 10,
                timingFunction: "linear",
                delay: 0
            })
            //this.animation = animation
            animation.translateY(10).step()
            this.setData({
                animationData: animation.export(),
            })
            setTimeout(function () {
                animation.translateY(0).step()
                this.setData({
                    animationData: animation.export(),
                    showModalStatus: false
                })
            }.bind(this), 10)
        },

        // 选择选项-----弹出框选择添加类型
        getValueTap(e) {
            console.log(e);
            let dialogid = e.currentTarget.dataset.dialogid;
            console.log(dialogid);
            this.setData({
                ['tabData.toValIndex']: dialogid, //更新
            })
            // var toNum = this.data.tabData.index;
        },
    },
    // 生命周期
    lifetimes: {
        ready: function () {

        },
    }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 深入理解javascript动态插入技术

    深入理解javascript动态插入技术

    这篇文章介绍了javascript动态插入技术,有需要的朋友可以参考一下
    2013-11-11
  • 浅谈javascript中的prototype和__proto__的理解

    浅谈javascript中的prototype和__proto__的理解

    这篇文章主要介绍了浅谈javascript中的prototype和__proto__的理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • javascript中的一些注意事项 更新中

    javascript中的一些注意事项 更新中

    记录一下这些内容只是以后查阅起来方便,作为自己知识积累的记录。其中有很多是参考网络上的资源,不再一一写出出处,还请原作者见谅。
    2010-12-12
  • 浅谈js中的this问题

    浅谈js中的this问题

    下面小编就为大家带来一篇浅谈js中的this问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JavaScript中instanceof运算符的用法总结

    JavaScript中instanceof运算符的用法总结

    这篇文章主要是对JavaScript中instanceof运算符的用法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 针对JavaScript中this指向的简单理解

    针对JavaScript中this指向的简单理解

    这篇文章主要为大家详细JavaScript中this指向的简单理解,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JavaScript的基础语法和数据类型详解

    JavaScript的基础语法和数据类型详解

    这篇文章主要介绍了JavaScript的基础语法和数据类型,保姆级的详细教程,万字长文详细的列出了JavaScript的各种语法,建议收藏系列,希望可以有所帮助
    2021-09-09
  • JavaScript实现alert弹框效果

    JavaScript实现alert弹框效果

    这篇文章主要为大家详细介绍了JavaScript实现alert弹框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JS实现向iframe中表单传值的方法

    JS实现向iframe中表单传值的方法

    这篇文章主要介绍了JS实现向iframe中表单传值的方法,涉及js针对页面元素及表单属性操作相关实现技巧,需要的朋友可以参考下
    2017-03-03
  • ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解

    ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解

    这篇文章主要介绍了ES6中Set和Map数据结构,Map与其它数据结构互相转换操作,结合实例形式详细分析了ES6中的Set和Map数据结构的概念、原理、遍历、去重等操作,以及Map与其它数据结构互相转换操作,需要的朋友可以参考下
    2019-02-02

最新评论