微信小程序怎么自定義可滾動(dòng)的彈出框

今天小編給大家分享一下微信小程序怎么自定義可滾動(dòng)的彈出框的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

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

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

在前端寫一個(gè)視窗，默認(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一個(gè)點(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;'>活動(dòng)規(guī)則</text>
      <view class='p_all10 tj lineH_m'>
        <text class='block font17 white tl'decode="{{true}}" style='padding-top:10rpx;'>活動(dòng)時(shí)間&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}}">活動(dòng)說明&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;
    //活動(dòng)規(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,
        });
      }
    })
  },
 
 // 活動(dòng)詳細(xì)規(guī)則
  openrule: function () {
    this.setData({   //打開規(guī)則模塊
      showModal: true
    });
  },
  closerule: function () {
    this.setData({   //關(guān)閉規(guī)則模塊
      showModal: false
    });
  },

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

/* 覆蓋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;
}

以上就是“微信小程序怎么自定義可滾動(dòng)的彈出框”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。