微信小程序自定義可滾動的彈出框

更新時間：2022年07月06日 16:17:11 作者：小白_0615

這篇文章主要為大家詳細(xì)介紹了微信小程序自定義可滾動的彈出框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序自定義可滾動彈出框的具體代碼，供大家參考，具體內(nèi)容如下

最近在寫一個裝修的活動，規(guī)則是點(diǎn)擊按鈕彈出加上相應(yīng)的動畫。

首先我們需要一個按鈕觸發(fā)顯示（如圖，點(diǎn)擊詳細(xì)規(guī)則顯示規(guī)則模態(tài)框，圖二右邊的滾動條在手機(jī)上不顯示）

思路：小程序自己的模態(tài)框不能寫樣式，這是個比較尷尬的情況，這是一個比較小白的解決方案：

在前端寫一個視窗，默認(rèn)讓它隱藏

我這邊是用showModel來控制，默認(rèn)給它false，當(dāng)點(diǎn)擊規(guī)則按鈕是將showModel的值改為true，點(diǎn)擊關(guān)閉按鈕將showModel的值改為false

小程序前端代碼（這是觸發(fā)按鈕）

<!-- 詳細(xì)規(guī)則 -->
? <view style='width:190rpx;height:70rpx;margin-left:76%;padding-top:44%'>
? ? <button class='form_button'bindtap="openrule">
? ? ? <image src='/images/act03.png'style='width:180rpx;height:60rpx;'></image>
? ? ? <text class='block font15 white center' decode="{{true}}" ?style='width:180rpx;height:60rpx; margin-left:5%; margin-top:-53%;letter-spacing:3rpx;'>詳細(xì)規(guī)則&gt;</text>
? ? </button>
</view>

小程序前端代碼（這是模態(tài)框），內(nèi)含關(guān)閉按鈕(這里是給text一個點(diǎn)擊事件當(dāng)做關(guān)閉按鈕)

<view class='tip-content-dialog' wx:if="{{showModal}}">
? <text class='dialogClose block tc font24 white' bindtap='closerule'>×</text>
? <scroll-view class="tip-dialog-view tc bg_rule p_all15 p_b20" scroll-y='true' style='height:85%;padding:30rpx;'>
? ? ? <text class='block font26 white tc'style='padding-top:10rpx;'>活動規(guī)則</text>
? ? ? <view class='p_all10 tj lineH_m'>
? ? ? ? <text class='block font17 white tl'decode="{{true}}" style='padding-top:10rpx;'>活動時間&ensp;:</text>
? ? ? ? <text class='block font15 white tl'style='padding-top:10rpx;padding-left:0rpx;'>{{activity_time}}</text>
? ? ? ? <text class='block font17 white tl'style='padding-top:20rpx;'decode="{{true}}">活動說明&ensp;:</text>
? ? ? ? <text class='block font15 white tj'style='padding-top:10rpx;padding-left:0rpx;'>{{activity_rule}}</text>
? ? ? </view>
? </scroll-view>
</view>

js

data: {
? ? showModal: false,
? },
?
onLoad: function (options) {
? ? var that = this;
? ? //活動規(guī)則
? ? wx.request({
? ? ? url: app.d.hostUrl + 'activity.activityConf', //此處是你的接口
? ? ? data: {
? ? ? },
? ? ? success: function (res) {
? ? ? ? //console.log(res.data); ?//接口中拿到的數(shù)據(jù)
? ? ? ? var activity_time = res.data.activity_time;
? ? ? ? var activity_rule = res.data.activity_rule;
? ? ? ? //規(guī)則數(shù)據(jù)顯示
? ? ? ? that.setData({
? ? ? ? ? activity_time: activity_time,
? ? ? ? ? activity_rule: activity_rule,
? ? ? ? });
? ? ? }
? ? })
? },
?
?// 活動詳細(xì)規(guī)則
? openrule: function () {
? ? this.setData({ ? //打開規(guī)則模塊
? ? ? showModal: true
? ? });
? },
? closerule: function () {
? ? this.setData({ ? //關(guān)閉規(guī)則模塊
? ? ? showModal: false
? ? });
? },

樣式（樣式中為了美觀加了彈出動畫，可直接使用）：

/* 覆蓋button樣式 */
button.form_button{
? background-color:transparent;
? padding:0;
? margin:0;
? display:inline;
? position:static;
? border:0;
? padding-left:0;
? padding-right:0;
? border-radius:0;
? /* font-size:0rpx; */
? color:transparent;
}
button.form_button::after{
? content:'';
? width:0;
? height:0;
? -webkit-transform:scale(1);
? transform:scale(1);
? display:none;
? background-color:transparent;
}
?
.tip-content-dialog{
? position: fixed;
? display: flex;
? top: 0;
? left: 0;
? right: 0;
? bottom: 0;
? background-color: rgba(0,0,0,.5);
? z-index: 99999;
}
?
.tip-content-dialog .tip-dialog-view{
? width: 80%;
? margin: auto;
? border-radius: 25rpx;
? vertical-align: middle;
? animation: tanchu 400ms ease-in;
? /* overflow: hidden; */
? padding: 20rpx;?
}
?
.tip-content-dialog .btn{
? background: #f2f7fa;
}
@keyframes tanchu{
? from{
? ? transform: scale(0,0);
? ? -webkit-transform: scale(0,0);
? }
? to{
? ? transform: scale(1,1);
? ? -webkit-transform: scale(1,1);
? }
}
?
.tip-content-dialog .dialogClose{
? position: absolute;
? right:20rpx;
? top: 10rpx;
? width: 60rpx;
? height: 60rpx;
? line-height: 60rpx;
? text-align: center;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: