国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<strike id="trfkc"></strike>

微信小程序彈窗

2年前作者：JefferyTan.分類(lèi)：Toy博客閱讀(20)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了微信小程序彈窗。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

微信小程序自定義底部、頂部、中間、左邊、右邊彈窗
簡(jiǎn)單的微信小程序彈窗功能，具體實(shí)現(xiàn)過(guò)程，請(qǐng)瀏覽代碼。

頂部彈出窗圖例：

中間彈出窗圖例：

底部彈出窗圖例：

左邊彈出窗圖例：

右邊彈出窗圖例：

wxml代碼

<button type="primary" bindtap="openPopup" data-index="0">打開(kāi)頂部彈窗</button>
<button type="primary" bindtap="openPopup" data-index="1">打開(kāi)中間彈窗</button>
<button type="primary" bindtap="openPopup" data-index="2">打開(kāi)底部彈窗</button>
<button type="primary" bindtap="openPopup" data-index="3">打開(kāi)左邊彈窗</button>
<button type="primary" bindtap="openPopup" data-index="4">打開(kāi)右邊彈窗</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)急天高猿嘯哀，渚清沙白鳥(niǎo)飛回。</view>
    <view>無(wú)邊落木蕭蕭下，不盡長(zhǎng)江滾滾來(lái)。</view>
    <view>萬(wàn)里悲秋常作客，百年多病獨(dú)登臺(tái)。</view>
    <view>艱難苦恨繁霜鬢，潦倒新停濁酒杯。</view>
  </view>
  <view class="row-btn">
    <view class="left-btn" bindtap="closePopup">取消</view>
    <view class="right-btn">確認(rèn)</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)急天高猿嘯哀，渚清沙白鳥(niǎo)飛回。</view>
      <view>無(wú)邊落木蕭蕭下，不盡長(zhǎng)江滾滾來(lái)。</view>
      <view>萬(wàn)里悲秋常作客，百年多病獨(dú)登臺(tái)。</view>
      <view>艱難苦恨繁霜鬢，潦倒新停濁酒杯。</view>
    </view>
    <view class="row-btn">
      <view class="left-btn" bindtap="closePopup">取消</view>
      <view class="right-btn">確認(rèn)</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)急天高猿嘯哀，渚清沙白鳥(niǎo)飛回。</view>
    <view>無(wú)邊落木蕭蕭下，不盡長(zhǎng)江滾滾來(lái)。</view>
    <view>萬(wàn)里悲秋常作客，百年多病獨(dú)登臺(tái)。</view>
    <view>艱難苦恨繁霜鬢，潦倒新停濁酒杯。</view>
  </view>
  <view class="row-btn">
    <view class="left-btn" bindtap="closePopup">取消</view>
    <view class="right-btn">確認(rèn)</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>渚清沙白鳥(niǎo)飛回。</view>
    <view>無(wú)邊落木蕭蕭下，</view>
    <view>不盡長(zhǎng)江滾滾來(lái)。</view>
    <view>萬(wàn)里悲秋常作客，</view>
    <view>百年多病獨(dú)登臺(tái)。</view>
    <view>艱難苦恨繁霜鬢，</view>
    <view>潦倒新停濁酒杯。</view>
  </view>
  <view class="row-btn fixed">
    <view class="left-btn" bindtap="closePopup">取消</view>
    <view class="right-btn">確認(rèn)</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>渚清沙白鳥(niǎo)飛回。</view>
    <view>無(wú)邊落木蕭蕭下，</view>
    <view>不盡長(zhǎng)江滾滾來(lái)。</view>
    <view>萬(wàn)里悲秋常作客，</view>
    <view>百年多病獨(dú)登臺(tái)。</view>
    <view>艱難苦恨繁霜鬢，</view>
    <view>潦倒新停濁酒杯。</view>
  </view>
  <view class="row-btn fixed">
    <view class="left-btn" bindtap="closePopup">取消</view>
    <view class="right-btn">確認(rèn)</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({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    showIndex:null,//打開(kāi)彈窗的對(duì)應(yīng)下標(biāo)
    height:'',//屏幕高度
  },
  // 打開(kāi)彈窗
  openPopup(e){
    var index = e.currentTarget.dataset.index;
    this.setData({
      showIndex:index
    })
  },
  //關(guān)閉彈窗
  closePopup(){
    this.setData({
      showIndex:null
    })
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
   */
  onReady() {
    var that = this;
    // 動(dòng)態(tài)獲取屏幕高度
    wx.getSystemInfo({
      success: (result) => {
        that.setData({
          height: result.windowHeight
        });
      },
    })
  },
})

代碼簡(jiǎn)潔，類(lèi)型齊全。本人才疏學(xué)淺，代碼僅供參考，如有問(wèn)題，請(qǐng)多多指教，酸Q。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-504941.html

到了這里，關(guān)于微信小程序彈窗的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

微信小程序首頁(yè)、界面布局、自定義頂部（示例一）
具體界面見(jiàn)下圖：如需界面中引用的圖片文件和更多功能，請(qǐng)滑動(dòng)至底部查看下載鏈接，可下載完整版，下載后直接使用微信開(kāi)發(fā)者工具打開(kāi)即可，完整版功能更詳細(xì)呦。當(dāng)前界面的布局樣式代碼如下（如存在不足之處，請(qǐng)根據(jù)具體需求，自行修改）： 1、js代碼： 2、wxml代
2024年02月12日
瀏覽(33)
微信小程序自定義頂部狀態(tài)欄滑動(dòng)顯示標(biāo)題居中
開(kāi)啟了自定義頂部的配置，輪播圖覆蓋了頂部，所以需要做一個(gè)上滑到膠囊后重新把標(biāo)題重新展示出來(lái)的操作，自定義標(biāo)題出現(xiàn)不居中情況，以下為解決后的方案，復(fù)制粘貼即可： . wxml： . . wxss： . . 滑動(dòng)事件：滑動(dòng)到膠囊后把標(biāo)題展示出來(lái) . . 計(jì)算膠囊按鈕高度、狀態(tài)欄高
2024年02月17日
瀏覽(34)
微信小程序自定義底部導(dǎo)航欄
微信小程序自定義底部導(dǎo)航欄，原生實(shí)現(xiàn)，不包含其他任何第三方組件，比較干凈，開(kāi)箱即用效果預(yù)覽：可自定義底部導(dǎo)航欄列表樣式可自定義每個(gè)菜單的默認(rèn)、激活后的圖標(biāo)和文字樣式可自定義是否添加中間的大圖標(biāo)菜單，當(dāng)然也可自定義大圖標(biāo)的默認(rèn)與激活樣式可自
2024年02月07日
瀏覽(35)
微信小程序——自定義底部tabBar
目錄 ?實(shí)現(xiàn)步驟 1、配置信息 2、添加代碼文件。 ?3、在該目錄下編寫(xiě)代碼即可。二、在app.json里面添加tabBar配置三.、在custom-tab-bar添加配置 1. 在custom-tab-bar創(chuàng)建如下目錄 2.給index.wxml添加tabBar的結(jié)構(gòu)代碼 ? 3.?給index.js 添加數(shù)據(jù)配置和事件方法 4.?給index.wxss 添加樣式四、
2024年02月16日
瀏覽(16)
微信小程序底部tabbar自定義實(shí)現(xiàn)凸起+透明底部效果
先上圖看效果：步驟： 1、在文件根目錄下創(chuàng)建一個(gè)文件夾：custom-tab-bar并分別創(chuàng)建 (js，json,wxml,wxss）類(lèi)型文件 2、在pages.json中設(shè)置tabbar中的custom為true(true自定義，false默認(rèn)系統(tǒng)) 3、index.js代碼如下：
2024年02月09日
瀏覽(26)
【微信小程序】底部彈窗固定定位fixed+textarea，導(dǎo)致的adjust-position在安卓手機(jī)失效問(wèn)題
安卓手機(jī)測(cè)試時(shí)候發(fā)現(xiàn)，fixed固定定位導(dǎo)致鍵盤(pán)彈出時(shí)，textarea無(wú)法正常被頂上去。然后我就嘗試了第二種方法用scroll-view將高度設(shè)置為100vh時(shí)，將頁(yè)面保持在視口高度，這個(gè)時(shí)候發(fā)現(xiàn)不管是彈窗是fixed還是absolute都無(wú)法讓安卓手機(jī)的鍵盤(pán)彈出時(shí)textarea頂上去最后我用了最后一種
2024年01月18日
瀏覽(31)
原聲微信小程序自定義頂部導(dǎo)航欄 . 自定義navigationBar。 (單頁(yè)面設(shè)置)
本文實(shí)例為大家分享了微信小程序自定義導(dǎo)航欄的具體代碼，供大家參考，具體內(nèi)容如下實(shí)現(xiàn)自定義大致需要以下?步驟: 1.在頁(yè)面.JSON文件進(jìn)行相關(guān)配置,以便去掉原生備注: ?navigationStyle（導(dǎo)航欄樣式），參數(shù): default = 默認(rèn)樣式，custom = 自定義樣式。? 2.在頁(yè)面.js文件onLoad生命
2024年02月09日
瀏覽(39)
微信小程序自定義底部 tabbar （中間凸起）
在與 pages 文件夾同級(jí)的地方新建 custom-tab-bar 文件夾，并新建 index.wxml 、index.wxss 、index.js 、index.json 四個(gè)文件夾注意路徑?。。?復(fù)制后會(huì)報(bào)錯(cuò)，把圖片和頁(yè)面路徑改掉就好了?。?！提示：不要無(wú)腦復(fù)制，復(fù)制到自己的項(xiàng)目中后記得更改圖片、頁(yè)面路徑?。?！如需自定義頭
2024年02月20日
瀏覽(26)
微信小程序｜自定義彈窗組件
2024年02月12日
瀏覽(87)
微信小程序自定義底部菜單設(shè)計(jì)，固定在底部，并非使用tabBar設(shè)計(jì)
1.微信小程序自定義底部菜單設(shè)計(jì)，并且固定在底部，并非tabBar設(shè)計(jì) 場(chǎng)景：比如加載詳情頁(yè)時(shí)：底部需要加入購(gòu)物車(chē)、收藏、返回主頁(yè)等設(shè)計(jì) 效果圖：點(diǎn)擊事件發(fā)生 xx.wxml 樣式設(shè)計(jì)xx.wxss js設(shè)計(jì)xx.js
2024年02月16日
瀏覽(37)

<thead id="g4mkp"></thead>