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


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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
javascript中导出与导入实现模块化管理教程
Dec 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
分享PHP入门的学习方法
2007/01/02 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
Python获取当前时间的方法
2014/01/14 Python
python实现逻辑回归的方法示例
2017/05/02 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
Python for循环生成列表的实例
2018/06/15 Python
python中partial()基础用法说明
2018/12/30 Python
python实现烟花小程序
2019/01/30 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
大学生自我鉴定评语
2014/01/27 职场文书
校园安全教育广播稿
2014/02/17 职场文书
升学宴主持词
2014/04/02 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
教师节表彰会主持词
2015/07/06 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
使用Python解决图表与画布的间距问题
2022/04/11 Python