微信小程序学习之自定义滚动弹窗

网络编程 2024/12/22 佚名

3 1 2

微信小程序虽然有三种自带的弹窗，但是毕竟功能有限，有时候难以满足我们的需求，所以我们可以自己尝试制作自定义弹窗，话不多说，直接上图：

其中列表部分支持滚动，所以信息承载能力很强。

实现代码：

wxml:

<button class="showModal" bindtap="showModal_click">唤出弹窗</button>
<!--弹窗-->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modal-dialog" wx:if="{{showModal}}">
 <view class="modal-title">标题</view>
 <view class="modal-title-sc">副标题</view>
 <view class="modal-content">
 <scroll-view scroll-y="true" style="height:100px;">
  <block wx:for="{{data}}" wx:key="id">
  <button class="info">
   <view class="name_List">{{item.name}}</view>
   <view class="quantity_List">×{{item.quantity}}</view>
   <view class="reason_List">{{item.message}}</view>
  </button>
  </block>
 </scroll-view>
 </view>
 <view class="modal-content-return">
 此处可随意添加文本内容
 </view>
 <view class="modal-footer">
 <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
 <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view>
 </view>
</view>

wxss:

.showModal{
 position:absolute;
 height:50px;
 left:30%;
 width:40%;
 top:40%;
 background: rgb(95, 228, 83);
 color:#fff;
 font-size: 20px;
}
/*以下全是弹窗样式*/
.modal-mask {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.5;
 overflow: hidden;
 z-index: 9000;
 color: #fff;
}
.modal-dialog {
 width: 80%;
 overflow: hidden;
 position: fixed;
 top: 40%;
 left: 0;
 z-index: 9999;
 background: #f9f9f9;
 margin-top: -180rpx;
 margin-left: 10%;
 border-radius: 36rpx;
}
.modal-title {
 padding-top: 30rpx;
 font-size: 20px;
 color: #030303;
 text-align: center;
}
.modal-title-sc {
 padding-top: 10rpx;
 font-size: 15px;
 color: #bebcbc;
 text-align: center;
}
.modal-content {
 padding: 10rpx 32rpx;
}
.info{
 height:30px;
 left:0%;
 text-align: left;
 font-size: 12px;
 color:#bebcbc;
}
.info::after{
 border: 0px;
}
.name_List{
 position:absolute;
 left:0%;
 width:40%;
 text-align: left;
}
.quantity_List{
 position:absolute;
 left:40%;
 width:10%;
 text-align: left;
}
.reason_List{
 position:absolute;
 left:50%;
 width:50%;
 text-align: right;
 overflow: hidden;
}
.modal-content-return{
 padding: 15rpx 32rpx;
 font-size: 15px;
 color: #bebcbc;
}
.modal-footer {
 display: flex;
 flex-direction: row;
 height: 86rpx;
 border-top: 1px solid #dedede;
 font-size: 34rpx;
 line-height: 86rpx;
}
.btn-cancel {
 width: 50%;
 color: #666;
 text-align: center;
 border-right: 1px solid #dedede;
}
.btn-confirm {
 width: 50%;
 color: #ec5300;
 text-align: center;
}

js:

Page({
 data: {
  data:null,
  showModal:false
 },
 onLoad: function () {
  var data=[
   {id:1,name:"cc",quantity:2,message:"爱玩游戏"},
   {id:2,name:"ha",quantity:4,message:"爱谈恋爱"},
   {id:3,name:"lxl",quantity:6,message:"爱看电视"},
   {id:4,name:"cc",quantity:2,message:"爱玩游戏"},
   {id:5,name:"ha",quantity:4,message:"爱谈恋爱"},
   {id:6,name:"lxl",quantity:6,message:"爱看电视"},
  ]
  this.setData({
   data:data
  })
 },
 showModal_click:function(){
  this.setData({
   showModal:true
  })
 },
 //弹窗事件
 hideModal: function () {
  this.setData({
   showModal: false
  });
 },
 onCancel: function () {
  this.hideModal();
 },
 onConfirm: function () {
  this.hideModal();
 }
})

直接拿过去就可以用，data里面的内容可以动态获取

微信小程序,自定义滚动弹窗,微信小程序弹出窗口,微信小程序弹窗提示框

风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

评论“微信小程序学习之自定义滚动弹窗”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日

微信小程序学习之自定义滚动弹窗

微信小程序自定义modal弹窗组件的方法详解

JavaScript中arguments的使用方法详解

评论“微信小程序学习之自定义滚动弹窗”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接