微信小程序?qū)崿F(xiàn)底部彈出框封裝
更新時間:2022年07月21日 10:09:06 作者:常安cc
這篇文章主要為大家詳細介紹了微信小程序底部彈出框封裝,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序底部彈出框封裝的具體代碼,供大家參考,具體內(nèi)容如下
<!--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 // 獲取應(yīng)用實例 const app = getApp() Page({ ? ? /** ? ? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 ? ? ?*/ ? ? onReady: function () { ? ? ? ? this.popup = this.selectComponent("#dialog"); //獲取 ? ? }, ? ?? ? ?? ? ? // 調(diào)用子組件事件---彈窗2 ? ? changeRange2(e) { ? ? ? ? var _this = this; ? ? ? ? _this.popup.changeRange(); //調(diào)用子組件內(nèi)的函數(shù) ? ? }, ? ?? })
<!--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 */ /*模態(tài)框*/ /*使屏幕變暗 ?*/ .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; } /* 主體內(nèi)容 */ .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: {}, ? ? /** ? ? ?* 組件的初始數(shù)據(jù) ? ? ?*/ ? ? data: { ? ? ? ? //彈窗顯示控制 ? ? ? ? showModalStatus: false, ? ? ? ? // isShowDialog: false, //是否顯示提示控件組件 ? ? ? ? // 點擊添加的數(shù)據(jù) ? ? ? ? tabData: { ? ? ? ? ? ? // title: '拒絕發(fā)貨', ? ? ? ? ? ? val: ['庫存', '跨境現(xiàn)貨', '爆款', '新品'], ? ? ? ? ? ? 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 () { ? ? ? ? }, ? ? } })
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
深入理解javascript動態(tài)插入技術(shù)
這篇文章介紹了javascript動態(tài)插入技術(shù),有需要的朋友可以參考一下2013-11-11淺談javascript中的prototype和__proto__的理解
這篇文章主要介紹了淺談javascript中的prototype和__proto__的理解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04JavaScript中instanceof運算符的用法總結(jié)
這篇文章主要是對JavaScript中instanceof運算符的用法進行了詳細的總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11JavaScript的基礎(chǔ)語法和數(shù)據(jù)類型詳解
這篇文章主要介紹了JavaScript的基礎(chǔ)語法和數(shù)據(jù)類型,保姆級的詳細教程,萬字長文詳細的列出了JavaScript的各種語法,建議收藏系列,希望可以有所幫助2021-09-09ES6中Set和Map數(shù)據(jù)結(jié)構(gòu),Map與其它數(shù)據(jù)結(jié)構(gòu)互相轉(zhuǎn)換操作實例詳解
這篇文章主要介紹了ES6中Set和Map數(shù)據(jù)結(jié)構(gòu),Map與其它數(shù)據(jù)結(jié)構(gòu)互相轉(zhuǎn)換操作,結(jié)合實例形式詳細分析了ES6中的Set和Map數(shù)據(jù)結(jié)構(gòu)的概念、原理、遍歷、去重等操作,以及Map與其它數(shù)據(jù)結(jié)構(gòu)互相轉(zhuǎn)換操作,需要的朋友可以參考下2019-02-02