欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序自定義底部、頂部、中間、左邊及右邊彈窗

 更新時間：2023年11月22日 09:49:16   作者：三腳貓的喵  
這篇文章主要給大家介紹了關(guān)于微信小程序自定義底部、頂部、中間、左邊及右邊彈窗的相關(guān)資料,彈窗是小程序中非常重要的一種互動方式,比如用戶注冊時錯誤提示、優(yōu)惠券領(lǐng)取提示、簽到成功提示等等,需要的朋友可以參考下

微信小程序自定義底部、頂部、中間、左邊、右邊彈窗

簡單的微信小程序彈窗功能，具體實現(xiàn)過程，請瀏覽代碼。

點擊事件

頂部彈出窗圖例：

頁面頂部彈出

中間彈出窗圖例：

中部彈窗

底部彈出窗圖例：

底部彈窗

左邊彈出窗圖例：

左邊彈出

右邊彈出窗圖例：

右邊彈出

wxml代碼

<button type="primary" bindtap="openPopup" data-index="0">打開頂部彈窗</button>
<button type="primary" bindtap="openPopup" data-index="1">打開中間彈窗</button>
<button type="primary" bindtap="openPopup" data-index="2">打開底部彈窗</button>
<button type="primary" bindtap="openPopup" data-index="3">打開左邊彈窗</button>
<button type="primary" bindtap="openPopup" data-index="4">打開右邊彈窗</button>
<!-- 頂部彈窗 -->
<view class="popup-box" wx:if="{{showIndex=='0'}}" bindtap="closePopup"></view> 
<view class="info-top" wx:if="{{showIndex=='0'}}">
  <view class="row-info">
    <view>
      <text class="line left-line"></text>
      <text>《登高》</text>
      <text class="line right-line"></text>
    </view>
    <view class="row-author">杜甫 〔唐代〕</view>
    <view>風急天高猿嘯哀，渚清沙白鳥飛回。</view>
    <view>無邊落木蕭蕭下，不盡長江滾滾來。</view>
    <view>萬里悲秋常作客，百年多病獨登臺。</view>
    <view>艱難苦恨繁霜鬢，潦倒新停濁酒杯。</view>
  </view>
  <view class="row-btn">
    <view class="left-btn" bindtap="closePopup">取消</view>
    <view class="right-btn">確認</view>
  </view>
</view>
<!-- 中間彈窗 -->
<view class="popup-box" wx:if="{{showIndex=='1'}}" bindtap="closePopup"></view> 
<view class="info-center" style="top:{{height*0.3}}px;height:{{height*0.4}}px;"
wx:if="{{showIndex=='1'}}">
  <view>
    <view class="row-info">
      <view>
        <text class="line left-line"></text>
        <text>《登高》</text>
        <text class="line right-line"></text>
      </view>
      <view class="row-author">杜甫 〔唐代〕</view>
      <view>風急天高猿嘯哀，渚清沙白鳥飛回。</view>
      <view>無邊落木蕭蕭下，不盡長江滾滾來。</view>
      <view>萬里悲秋常作客，百年多病獨登臺。</view>
      <view>艱難苦恨繁霜鬢，潦倒新停濁酒杯。</view>
    </view>
    <view class="row-btn">
      <view class="left-btn" bindtap="closePopup">取消</view>
      <view class="right-btn">確認</view>
    </view>
  </view>
</view>
<!-- 底部彈窗 -->
<view class="popup-box" wx:if="{{showIndex=='2'}}" bindtap="closePopup"></view> 
<view class="info-bottom" wx:if="{{showIndex=='2'}}">
  <view class="row-info">
    <view>
      <text class="line left-line"></text>
      <text>《登高》</text>
      <text class="line right-line"></text>
    </view>
    <view class="row-author">杜甫 〔唐代〕</view>
    <view>風急天高猿嘯哀，渚清沙白鳥飛回。</view>
    <view>無邊落木蕭蕭下，不盡長江滾滾來。</view>
    <view>萬里悲秋常作客，百年多病獨登臺。</view>
    <view>艱難苦恨繁霜鬢，潦倒新停濁酒杯。</view>
  </view>
  <view class="row-btn">
    <view class="left-btn" bindtap="closePopup">取消</view>
    <view class="right-btn">確認</view>
  </view>
</view>

<!-- 左邊彈窗 -->
<view class="popup-box" wx:if="{{showIndex=='3'}}" bindtap="closePopup"></view> 
<view class="info-left" wx:if="{{showIndex=='3'}}">
  <view class="row-info">
    <view>
      <text class="line left-line"></text>
      <text>《登高》</text>
      <text class="line right-line"></text>
    </view>
    <view class="row-author">杜甫 〔唐代〕</view>
    <view>風急天高猿嘯哀，</view>
    <view>渚清沙白鳥飛回。</view>
    <view>無邊落木蕭蕭下，</view>
    <view>不盡長江滾滾來。</view>
    <view>萬里悲秋常作客，</view>
    <view>百年多病獨登臺。</view>
    <view>艱難苦恨繁霜鬢，</view>
    <view>潦倒新停濁酒杯。</view>
  </view>
  <view class="row-btn fixed">
    <view class="left-btn" bindtap="closePopup">取消</view>
    <view class="right-btn">確認</view>
  </view>
</view>
<!-- 右邊彈窗 -->
<view class="popup-box" wx:if="{{showIndex=='4'}}" bindtap="closePopup"></view> 
<view class="info-right" wx:if="{{showIndex=='4'}}">
  <view class="row-info">
    <view>
      <text class="line left-line"></text>
      <text>《登高》</text>
      <text class="line right-line"></text>
    </view>
    <view class="row-author">杜甫 〔唐代〕</view>
    <view>風急天高猿嘯哀，</view>
    <view>渚清沙白鳥飛回。</view>
    <view>無邊落木蕭蕭下，</view>
    <view>不盡長江滾滾來。</view>
    <view>萬里悲秋常作客，</view>
    <view>百年多病獨登臺。</view>
    <view>艱難苦恨繁霜鬢，</view>
    <view>潦倒新停濁酒杯。</view>
  </view>
  <view class="row-btn fixed">
    <view class="left-btn" bindtap="closePopup">取消</view>
    <view class="right-btn">確認</view>
  </view>
</view>

wxss代碼

/* 蒙層 */
.popup-box{
  position: absolute;
  z-index: 99;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}
/* 上 */
.info-top{
  position: fixed;
  z-index: 999;
  width: 100%;
  top: 0;
  background-color: white;
  border-bottom-left-radius: 5rpx;
  border-bottom-right-radius: 5rpx;
}
/* 中 */
.info-center{
  position: fixed;
  z-index: 999;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}
/* 下 */
.info-bottom{
  position: fixed;
  z-index: 999;
  width: 100%;
  bottom: 0;
  background-color: white;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
}
/* 左 */
.info-left{
  position: fixed;
  z-index: 999;
  width: 50%;
  height: 100%;
  top: 0;
  background-color: white;
  border-top-right-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
}
/* 右 */
.info-right{
  position: fixed;
  z-index: 999;
  width: 50%;
  height: 100%;
  right: 0;
  top: 0;
  background-color: white;
  border-top-left-radius: 10rpx;
  border-bottom-left-radius: 10rpx;
}
/* 自定義內(nèi)容（根據(jù)自己需求更改,可刪除） */
button{
  margin: 15rpx 0;
}
.row-info{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15rpx;
  font-size: 32rpx;
}
.row-info view{
  padding: 10rpx 0;
}
.row-info view:first-child{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.line{
  width: 100rpx;
  height: 1rpx;
}
.left-line{
  background-image: linear-gradient(to left,orange,white);
}
.right-line{
  background-image: linear-gradient(to right,orange,white);
}
.row-author{
  font-size: 24rpx;
  color: gray;
}
.row-btn{
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top: 1rpx dashed #f1f1f1;
}
.row-btn view{
  flex: 1;
  text-align: center;
  margin: 20rpx 10%;
  padding: 12rpx 0;
  font-size: 32rpx;
  border-radius: 10rpx;
}
.left-btn{
  background-color: #f1f1f1;
  color: #33ccff;
}
.right-btn{
  background-color: #33ccff;
  color: white;
}
.fixed{
  position: fixed;
  bottom: 0;
  width: 50%;
}

js代碼

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    showIndex:null,//打開彈窗的對應(yīng)下標
    height:'',//屏幕高度
  },
  // 打開彈窗
  openPopup(e){
    var index = e.currentTarget.dataset.index;
    this.setData({
      showIndex:index
    })
  },
  //關(guān)閉彈窗
  closePopup(){
    this.setData({
      showIndex:null
    })
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady() {
    var that = this;
    // 動態(tài)獲取屏幕高度
    wx.getSystemInfo({
      success: (result) => {
        that.setData({
          height: result.windowHeight
        });
      },
    })
  },
})

代碼簡潔，類型齊全。本人才疏學淺，代碼僅供參考，如有問題，請多多指教，酸Q。

總結(jié)

到此這篇關(guān)于微信小程序自定義底部、頂部、中間、左邊及右邊彈窗的文章就介紹到這了,更多相關(guān)微信小程序彈窗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 用apply讓javascript函數(shù)僅執(zhí)行一次的代碼

    用apply讓javascript函數(shù)僅執(zhí)行一次的代碼

    有時候我們只想要讓某些腳步函數(shù)執(zhí)行一次就算完成任務(wù)了。如何實現(xiàn)這種功能呢？簡單模仿下面這段就可以輕松搞定了
    2010-06-06
  • moment.js使用超詳細教程

    moment.js使用超詳細教程

    Moment.js是一個輕量級的JavaScript時間庫，它方便了日常開發(fā)中對時間的操作，提高了開發(fā)效率下，本文給大家介紹moment.js使用超詳細教程，感興趣的朋友跟隨小編一起看看吧
    2023-10-10
  • 基于three.js實現(xiàn)的3D粒子動效實例代碼

    基于three.js實現(xiàn)的3D粒子動效實例代碼

    這篇文章主要給大家介紹了關(guān)于如何基于three.js實現(xiàn)的3D粒子動效的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用three.js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
    2019-04-04
  • javascript的console.log()用法小結(jié)

    javascript的console.log()用法小結(jié)

    console.log 原先是 Firefox 的 專利 ，嚴格說是安裝了 Firebugs 之后的 Firefox 所獨有的調(diào)試 絕招
    2012-05-05
  • 利用原生JS實現(xiàn)懶加載lazyLoad的三種方法總結(jié)

    利用原生JS實現(xiàn)懶加載lazyLoad的三種方法總結(jié)

    加載頁面的時候,圖片一直都是流量大頭,針對圖片的性能方法也挺多的比如base64、雪碧圖等;懶加載也是其中一種,這篇文章主要給大家介紹了關(guān)于利用原生JS實現(xiàn)懶加載lazyLoad的三種方法,需要的朋友可以參考下
    2021-07-07
  • webpack-dev-server 的 host 配置 0.0.0.0的方法

    webpack-dev-server 的 host 配置 0.0.0.0的方法

    這篇文章主要介紹了webpack-dev-server 的 host 配置 0.0.0.0的方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,,需要的朋友可以參考下
    2024-01-01
  • JavaScript偽數(shù)組用法實例分析

    JavaScript偽數(shù)組用法實例分析

    這篇文章主要介紹了JavaScript偽數(shù)組用法,結(jié)合實例形式分析了偽數(shù)組的概念、功能、定義及簡單使用方法,需要的朋友可以參考下
    2017-12-12
  • Javascript 瀏覽器事件小結(jié)

    Javascript 瀏覽器事件小結(jié)

    Javascript中的事件都是與對象相關(guān)聯(lián)的，而不是語言本身所有，當Javascript在瀏覽器中運行的時候，事件與每個瀏覽器實現(xiàn)的DOM模型有關(guān)。
    2010-02-02
  • javascript使用正則表達式檢測IP地址

    javascript使用正則表達式檢測IP地址

    這篇文章主要介紹了javascript使用正則表達式檢測IP地址的方法,需要的朋友可以參考下
    2014-12-12
  • 關(guān)于編寫性能高效的javascript事件的技術(shù)

    關(guān)于編寫性能高效的javascript事件的技術(shù)

    這篇文章主要介紹了關(guān)于編寫性能高效的javascript事件的技術(shù) ,需要的朋友可以參考下
    2014-11-11

最新評論