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


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 相关文章推荐
JavaScript中string转换成number介绍
Dec 31 Javascript
js去除浏览器默认底图的方法
Jun 08 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
node使用request请求的方法
Dec 20 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
微信小程序基础教程之echart的使用
Jun 01 Javascript
javascript之Object.assign()的痛点分析
Mar 03 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
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
Python入门教程之if语句的用法
2015/05/14 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
Python 可视化神器Plotly详解
2020/12/26 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
Eclipse面试题
2014/03/22 面试题
什么是Smart Navigation?
2016/07/03 面试题
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
500字作文之难忘的同学
2019/12/20 职场文书