温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么在微信小程序中自定义一个滚动弹窗

发布时间:2020-12-21 14:43:12 阅读:304 作者:Leah 栏目:开发技术
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

今天就跟大家聊聊有关怎么在微信小程序中自定义一个滚动弹窗,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

实现代码:

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" >
  <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%;
 backgroundrgb(9522883);
 color:#fff;
 font-size20px;
}
/*以下全是弹窗样式*/
.modal-mask {
 width100%;
 height100%;
 position: fixed;
 top0;
 left0;
 background#000;
 opacity0.5;
 overflow: hidden;
 z-index9000;
 color#fff;
}
.modal-dialog {
 width80%;
 overflow: hidden;
 position: fixed;
 top40%;
 left0;
 z-index9999;
 background#f9f9f9;
 margin-top: -180rpx;
 margin-left10%;
 border-radius36rpx;
}
.modal-title {
 padding-top30rpx;
 font-size20px;
 color#030303;
 text-align: center;
}
.modal-title-sc {
 padding-top10rpx;
 font-size15px;
 color#bebcbc;
 text-align: center;
}
.modal-content {
 padding10rpx 32rpx;
}
.info{
 height:30px;
 left:0%;
 text-align: left;
 font-size12px;
 color:#bebcbc;
}
.info::after{
 border0px;
}
.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{
 padding15rpx 32rpx;
 font-size15px;
 color#bebcbc;
}
.modal-footer {
 display: flex;
 flex-direction: row;
 height86rpx;
 border-top1px solid #dedede;
 font-size34rpx;
 line-height86rpx;
}
.btn-cancel {
 width50%;
 color#666;
 text-align: center;
 border-right1px solid #dedede;
}
.btn-confirm {
 width50%;
 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({
   showModalfalse
  });
 },
 onCancel: function ({
  this.hideModal();
 },
 onConfirm: function ({
  this.hideModal();
 }
})

看完上述内容,你们对怎么在微信小程序中自定义一个滚动弹窗有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×