最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

 更新時間：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>風(fēng)急天高猿嘯哀，渚清沙白鳥飛回。</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>風(fēng)急天高猿嘯哀，渚清沙白鳥飛回。</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>風(fēng)急天高猿嘯哀，渚清沙白鳥飛回。</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>風(fēng)急天高猿嘯哀，</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>風(fēng)急天高猿嘯哀，</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
        });
      },
    })
  },
})

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

總結(jié)

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

相關(guān)文章

最新評論

汽车| 平舆县| 彭州市| 晋中市| 建宁县| 滨海县| 历史| 南充市| 绍兴县| 溆浦县| 卓资县| 平乐县| 淮南市| 宣汉县| 舒兰市| 喜德县| 大港区| 虎林市| 田林县| 丁青县| 出国| 文成县| 合阳县| 花莲县| 锡林浩特市| 报价| 辽源市| 建瓯市| 偃师市| 仙桃市| 华坪县| 仲巴县| 江川县| 广南县| 思茅市| 安顺市| 江川县| 马边| 岳西县| 偏关县| 历史|