溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了微信小程序 自定義彈窗實現過程(附代碼),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
小程序官網里彈出框一般都是類似下面形式：
而有時候我們需要更豐富的彈窗時，就可用自定義彈窗的樣式：
舉個例子，像下面圖的樣式，點擊后會彈出不一樣的窗口：
代碼如下：
index.wxml 文件
<!--index.wxml-->
<view class="click" bindtap="click">
<text>點擊出現彈窗</text>
</view>
<!-- 彈窗 -->
<view class="window" wx:if="{{tab==1}}">
自定義內容。。。
</view>
index.wxss 文件
/**index.wxss**/
.click{
width: 500rpx;
height: 70rpx;
font-size: 20px;
}
.window{
position: fixed;
height: 400rpx;
width: 400rpx;
transform: translate( 50%, 50%);/*距x,y軸*/
background: salmon;
}
index.js 文件
//index.js
//獲取應用實例
const app = getApp()
Page({
data: {
tab: 0
},
//點擊出現彈窗
click: function() {
let that = this;
that.setData({
tab: 1
});
}
})
完整代碼已放在github上，鏈接如下：
https://github.com/bbSpider/miniprogram
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
