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


Posted in Javascript onDecember 20, 2020

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

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

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

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

实现代码:

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里面的内容可以动态获取

到此这篇关于微信小程序学习之自定义滚动弹窗的文章就介绍到这了,更多相关微信小程序自定义滚动弹窗内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
用YUI做了个标签浏览效果
Feb 20 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
JavaScript中arguments的使用方法详解
Dec 20 #Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 #Vue.js
vue中如何添加百度统计代码
Dec 19 #Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 #Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 #Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 #Vue.js
Vue——前端生成二维码的示例
Dec 19 #Vue.js
You might like
php公用函数列表[正则]
2007/02/22 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
用Python遍历C盘dll文件的方法
2015/05/06 Python
python绘制直方图和密度图的实例
2019/07/08 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
np.random.seed() 的使用详解
2020/01/14 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
JS原生实现轮播图的几种方法
2021/03/23 Javascript
给水工程专业毕业生自荐信
2014/01/28 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
大三学习计划书范文
2014/05/02 职场文书
党员个人年度总结
2015/02/14 职场文书
师范生见习自我总结
2015/06/23 职场文书
礼仪培训心得体会
2016/01/22 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
golang实现浏览器导出excel文件功能
2022/03/25 Golang