微信小程序实现底部弹出框封装
更新时间: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中的prototype和__proto__的理解
这篇文章主要介绍了浅谈javascript中的prototype和__proto__的理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-04-04ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
这篇文章主要介绍了ES6中Set和Map数据结构,Map与其它数据结构互相转换操作,结合实例形式详细分析了ES6中的Set和Map数据结构的概念、原理、遍历、去重等操作,以及Map与其它数据结构互相转换操作,需要的朋友可以参考下2019-02-02
最新评论