微信小程序彈窗組件使用詳解
更新時間：2022年07月06日 10:01:33 作者：發呆的薇薇°
這篇文章主要為大家詳細介紹了微信小程序彈窗組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
介紹
最近在開發小程序應用, 發現小程序當中有關于組件的介紹非常的少, 當前自己做的項目當中,有出現過這種情況, 所以自己就封裝了一個小程序的彈窗組件, 現在把自己的心得分享給大家, 大家一起來學習吧
效果圖
需求背景
項目需求是需要在頁面上通過點擊按鈕, 然后彈出彈窗蒙層; 因為小小程序當中經常會用到彈窗, 因此這里我直接將彈窗封裝成了一個組件, 下次使用的時候,直接調用就可以了。
實現步驟
1、在微信小程序當中, 在當前項目當中, 新建一個component文件夾, 這個文件夾專門用來存放我們要使用的組件, 然后在component文件夾下右擊, 新建文件夾popup, 這里就是我們要用的彈窗組件的文件夾, 再右擊popup文件夾, 選擇新建component, 然后直接輸入popup即可, 小程序內部會為我們自動生成.wxss , wxml , json , js等模板文件, 如下圖所示,popup文件夾下的文件為我們的組件,index文件夾下的文件為首頁上頁面：
2、popup彈窗組件的代碼部分;
popup.wxml
<view class="wx-popup" style="margin:-{{windowHeight/2}}px 0 0 -{{windowWidth/2}}px" hidden="{{flag}}">
? <view class='popup-container'>
? ? <view class="wx-popup-title">{{title}}</view>
? ? <!-- <view class="wx-popup-con" >{{content}}</view> -->
? ? <view class="wx-popup-con" >
? ? ? <text>{{content_leftText}}</text>
? ? ? <text class="content_money">{{content_money}}</text>
? ? ? <text>{{content_rightText}}</text>
? ? </view>
? ? <view class="wx-popup-btn">
? ? ? <view class="closeBtn">
? ? ? ? <view class="close-popup" bindtap='_close'>
? ? ? ? ? <view>X</view>
? ? ? ? </view>
? ? ? </view>
? ? </view>
? </view>
</view>popup.wxss
.wx-popup {
? position: fixed;
? left: 0;
? bottom: 0;
? top: 0;
? z-index: 2000;
? width: 100%;
? height: 100%;
? background: rgba(0, 0, 0, .6);
}
.popup-container {
? position: fixed;
? left: 10%;
? top: 20%;
? width: 80%;
? max-width: 600rpx;
? border-radius: 20rpx;
? box-sizing: bordre-box;
? background: #fff;
? z-index: 2000;
}
.wx-popup-title {
? width: 100%;
? padding: 28rpx;
? text-align: center;
? font-size: 36rpx;
? font-weight: bold;
? border-bottom: 5rpx solid #9EA3BA;
? box-sizing: border-box;
}
.wx-popup-con {
? margin: 50rpx 10rpx;
? text-align: center;
? padding: 0 86rpx;
}
.wx-popup-con text {
? padding-bottom: 10rpx;
}
.content_money {
? color: #FFB258;
}
.wx-popup-btn {
? display: flex;
? justify-content: space-around;
? margin-bottom: 40rpx;
}
.wx-popup-btn text {
? display: flex;
? align-items: center;
? justify-content: center;
? width: 30%;
? height: 88rpx;
? border: 2rpx solid #ccc;
? border-radius: 88rpx;
}
.wx-popup-btn .closeBtn {
? position: fixed;
? left: 45%;
? bottom: 30%;
}
.wx-popup-btn .close-popup {
? position: relative;
? height: 80rpx;
? width: 80rpx;
? border: 5rpx solid #fff;
? border-radius: 50%;
}
?.wx-popup-btn .close-popup view {
? ?position: absolute;
? ?left: 30%;
? ?top: 8%;
? ?font-size: 50rpx;
? ?color: #fff;
?}popup.js
Component({
? options: {
? ? multipleSlots: true // 在組件定義時的選項中啟用多slot支持
? },
? /**
? ?* 組件的屬性列表
? ?*/
? properties: {
? ? title: { ? ? ? ? ? ?// 屬性名
? ? ? type: String, ? ? // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
? ? ? value: '標題' ? ? // 屬性初始值（可選），如果未指定則會根據類型選擇一個
? ? },
? ? // 彈窗內容
? ? content_leftText: {
? ? ? type: String,
? ? ? value: '內容'
? ? },
? ? content_money: {
? ? ? type: String,
? ? ? value: '內容'
? ? },
? ? content_rightText: {
? ? ? type: String,
? ? ? value: '內容'
? ? },
? },
? /**
? ?* 組件的初始數據
? ?*/
? data: {
? ? flag: true,
? },
? /**
? ?* 組件的方法列表
? ?*/
? methods: {
? ? //隱藏彈框
? ? hidePopup: function () {
? ? ? this.setData({
? ? ? ? flag: !this.data.flag
? ? ? })
? ? },
? ? //展示彈框
? ? showPopup () {
? ? ? this.setData({
? ? ? ? flag: !this.data.flag
? ? ? })
? ? },
? ? /*
? ? * triggerEvent 用于觸發事件
? ? */
? ? _close() {
? ? ? this.triggerEvent("close");
? ? }
? }
})3、完成模板文件的工作后, 接下來就是在首頁當中對這個組件進行配置, 在index文件夾當中對index.json文件進行配置, 代碼如下：
4、在首頁當中進行使用,代碼如下：
<view class="index_popup">
? ? <view class="btn-area">
? ? ? ? <button type="primary" bindtap="showPopup">點擊預測價錢</button>
? ? </view>
? ? <popup id='popup'
? ? ? ? title='預測價格'?
? ? ? ? content_leftText='您好,預測價格為'
? ? ? ? content_money='{{content_money}}'?
? ? ? ? content_rightText='元 , 預測價格和實際價格存在偏差,請耐心等候專業顧問為您服務。' ?
? ? ? ? bind:close="_close">
? ? </popup>
</view>5、index.wxss的樣式
.index_popup .btn-area button {
? background-image: linear-gradient(to right, rgba(36, 162, 255), rgba(36, 172, 255), rgba(36, 192, 255));
? font-size: 34rpx;
? font-weight: normal;
? border-radius: 50rpx;
? padding: 18rpx 30rpx;
? margin-top: 100rpx;
}6、index.js文件里, 配置對應的點擊事件, 還有操作數據
// index.js
// 獲取應用實例
const app = getApp()
Page({
? data: {
? ? content_money: '1000萬'
? },
? onReady: function () {
? ? //獲得popup組件
? ? this.popup = this.selectComponent("#popup");
? },
? showPopup() {
? ? this.popup.showPopup();
? },
? //取消事件
? _close() {
? ? console.log('你點擊了關閉按鈕');
? ? this.popup.hidePopup();
? },
? onLoad() {
? },
})至此, 就全部結束了, 當點擊首頁index.wxml上的按鈕時, 彈出彈窗組件, 點擊彈窗頁面下的X按鈕, 可以關閉彈窗。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了使用JS實現動態時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
javascript一種由Netscape的LiveScript發展而來的腳本語言，它提高與Java的兼容性。JavaScript采用HTML頁作為其接口。很多朋友問js是什么意思？下面小編通過分享本教程給大家解答下，感興趣的朋友參考下2016-09-09
下面的方法是個不錯的思路，建議對于js感興趣的朋友，推薦看2008-10-10
javascript中的函數聲明與函數表達式使用比較頻繁，可能很多的朋友都不知道他們之間的區別，在此為大家詳細介紹下，希望對大家有所幫助2013-10-10
JS動態獲取當前時間,并寫到特定的區域，需要的朋友可以參考一下2013-05-05
這篇文章主要介紹了js使用for循環機if語句判斷多個一樣的name,此法比較實用，需要的朋友可以參考下2014-09-09
本篇文章是對js中正則表達式的使用進行了詳細的分析介紹，需要的朋友可以參考下2013-07-07
多種方法實現頁面的刷新代碼2008-11-11
這篇文章主要介紹了JS實現的合并多個數組去重算法,涉及javascript數組遍歷、判斷、運算、排序等相關操作技巧,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細介紹了JS實現按比例縮小圖片寬高，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
最新評論