資訊專欄INFORMATION COLUMN
本篇文章就是為大家分享在微信小程序?qū)崿F(xiàn)簡單彈框的具體代碼，現(xiàn)在我們看下：
1、頁面結(jié)構(gòu)
<!-- 遮罩層 -->
<view>
<view class="mask" bindtap="close" wx:if="{{ showModal }}"></view>
<view class="modal" wx:if="{{ showModal }}">
<view class="dialog">
<view class="dialog-head">
<h3>發(fā)送短信</h3>
</view>
</view>
<view class="section section_gap">
<radio-group class="radio-group" bindchange="radioChange">
<radio class="radio" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
<text>{{item.value}}</text>
</radio>
</radio-group>
</view>
<view>
<textarea class="textarea w100" placeholder="短信內(nèi)容" maxlength="-1" v-model="params.bz"></textarea>
</view>
<view class="btnFlex">
<view>
<button class="btn" bindtap="close">取消</button>
</view>
<view>
<button class="btn" bindtap="go">發(fā)送</button>
</view>
</view>
</view>
</view>2、頁面樣式
.btn{
color: #fff;
font-size: 31rpx;
background-color: #f95137;
margin: 11rpx 20rpx 0rpx;
border-radius: 45rpx;
width: 215rpx;
height: 81rpx;
line-height: 81rpx;
/* padding-left: ; */
}
.btnFlex{
display: flex;
justify-content: center;
align-items: center;
margin-top: 50rpx;
}
.dialog-head{
font-size: 33rpx;
color: #172238;
font-weight: bold;
display: flex;
align-items: center;
padding: 20rpx;
border-bottom: 1rpx solid #e1e5e9;
}
/* 文本域 */
.textarea {
width: 92%;
height: 246rpx;
margin: 20rpx 30rpx;
margin-top: 20rpx;
padding: 20rpx;
border-radius: 6rpx;
border: solid 1rpx #e7eaf0;
background-color: #f4f6f9;
}
.radio {
width: 33%
}
.section_gap {
margin: 20rpx 30rpx;
}3、js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
showModal: false,
items: [
{ name: 'USA', value: '劉禪' },
{ name: 'CHN', value: '劉備', checked: 'true' },
{ name: 'BRA', value: '諸葛亮' },
{ name: 'JPN', value: '關(guān)羽' },
{ name: 'ENG', value: '趙云' },
{ name: 'FRA', value: '張子龍' },
]
},
//給自定義button或者自定義view添加一個點擊事件跳轉(zhuǎn)，這里的html就不給出來了
signinTap: function(e) {
this.setData({
showModal: true,
})
//具體調(diào)用接口省略***
},
// 發(fā)送
go() {
this.setData({
showModal: false
})
//具體調(diào)用接口省略***
},
//取消
close() {
this.setData({
showModal: false
})
// this.showModal = false;
},實戰(zhàn)項目圖片
很多經(jīng)驗都是靠項目積累的，因此，我們要逐漸積累自己的。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/128434.html
摘要：于是我自己寫一個我的頁面專用的彈框，具體效果如下圖以下是代碼貼圖最外層的樣式主要是寫后面的遮罩層，就是具體的彈框區(qū)域彈框的顯示隱藏用控制然后就可以在彈框中寫自己想要展示的效果啦忽略部分未調(diào)整樣式 微信小程序提供的彈框模版就3種：1、消息提示框showImg(https://segmentfault.com/img/bVbokVL?w=1074&h=554);對應(yīng)的效果是這樣的 show...
摘要：于是我自己寫一個我的頁面專用的彈框，具體效果如下圖以下是代碼貼圖最外層的樣式主要是寫后面的遮罩層，就是具體的彈框區(qū)域彈框的顯示隱藏用控制然后就可以在彈框中寫自己想要展示的效果啦忽略部分未調(diào)整樣式 微信小程序提供的彈框模版就3種：1、消息提示框showImg(https://segmentfault.com/img/bVbokVL?w=1074&h=554);對應(yīng)的效果是這樣的 show...
摘要：網(wǎng)友們的方法網(wǎng)友們有人使用的方式是給綁定一個空方法。這也是一個解決方法。友情提醒關(guān)于不能滾動的這個效果需要在真機上面查看，在編輯器上面看不到效果。本文首發(fā)于公眾號前端的極致實現(xiàn)。歡迎小可愛們來交流加我微信拉大家進群 我們需要解決的問題：當彈框顯示的時候，彈框下面的內(nèi)容不能滾動 小程序的彈框特別多,像下面這樣，彈框的底部是一個可以下拉的頁面，但是當彈框出現(xiàn)的時候，需要禁止底部的滾動，那么...
摘要：資源開發(fā)文檔是一套完全免費的微信小程序開發(fā)框架，擴展了小程序的能力。推薦有一些不錯的解決方案封裝封裝跨頁面事件通訊監(jiān)聽數(shù)據(jù)變化開發(fā)如何在微信小程序的頁面間傳遞數(shù)據(jù)需要時可以快速過一遍。微信小程序回調(diào)，，，的使用例子供參考 這篇文章主要記錄我做小程序「輕算賬」過程中遇到的一些問題和解決方案，就當是做個總結(jié)，也希望其中有能夠幫助到他人的信息。 showImg(https://segment...
閱讀 685·2023-03-27 18:33
閱讀 887·2023-03-26 17:27
閱讀 750·2023-03-26 17:14
閱讀 735·2023-03-17 21:13
閱讀 665·2023-03-17 08:28
閱讀 2083·2023-02-27 22:32
閱讀 1517·2023-02-27 22:27
閱讀 2430·2023-01-20 08:28
