微信小程序实现底部弹出框


Posted in Javascript onNovember 18, 2020

微信小程序的底部弹出框,供大家参考,具体内容如下

微信小程序实现底部弹出框

wxml

<!-- 弹出框 start -->
<view class="dialog_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<view animation="{{animationData}}" class="dialog_attr_box" wx:if="{{showModalStatus}}">
 <view style='background:white;position: relative;overflow: hidden;'>
 <view class='dialog_title'>选择系列</view>
 <view wx:for="{{list}}" wx:key="name" class='dialog_content'>
  <view class="{{item.status==0?'type_nor':'type_pre'}}" bindtap='typeClick' data-index='{{index}}'>{{item.txt}}</view>
 </view>
 </view>
</view>
<!-- 弹出框 end -->

wxss

/* dialog start */

.dialog_screen {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.2;
 overflow: hidden;
 z-index: 1000;
 color: #fff;
}

.dialog_attr_box {
 width: 100%;
 overflow: hidden;
 position: fixed;
 bottom: 0;
 left: 0;
 z-index: 2000;
 background: #fff;
 padding-top: 1px;
}

.dialog_title {
 font-size: 16px;
 height: 30px;
 display: flex;
 align-items: center;
 padding: 10px;
 background: #80cbc4;
 color: white;
}

.dialog_content {
 position: relative;
 float: left;
 padding: 10px 10px;
 width: 25%;
 box-sizing: border-box;
}

/* dialog end */

js

var postData = require('../../../data/StoreData.js');
var typeList = postData.postListData;
Page({
 data: {
 list: typeList
 },
 onLoad: function(options) {
 var id = options.id; //页面跳转传过来的值
 //初始化默认一部分数据已选中
 for (var i = 0; i < typeList.length; i++) {
  if (i % 2 == 0) {
  typeList[i].status = 0;
  } else {
  typeList[i].status = 1;
  }
 }
 this.setData({
  list: typeList
 });
 },
 showModal: function() {
 // 显示遮罩层
 var animation = wx.createAnimation({
  duration: 200,
  timingFunction: "linear",
  delay: 0
 })
 this.animation = animation
 animation.translateY(300).step()
 this.setData({
  animationData: animation.export(),
  showModalStatus: true
 })
 setTimeout(function() {
  animation.translateY(0).step()
  this.setData({
  animationData: animation.export()
  })
 }.bind(this), 200)
 },
 hideModal: function() {
 // 隐藏遮罩层
 var animation = wx.createAnimation({
  duration: 200,
  timingFunction: "linear",
  delay: 0
 })
 this.animation = animation
 animation.translateY(300).step()
 this.setData({
  animationData: animation.export(),
 })
 setTimeout(function() {
  animation.translateY(0).step()
  this.setData({
  animationData: animation.export(),
  showModalStatus: false
  })
 }.bind(this), 200)
 },
 typeClick: function(e) {
 var index = e.target.dataset.index;
 for (var i = 0; i < typeList.length; i++) {
  if (i == index) {
  var curStatus = typeList[i].status;
  if(curStatus == 0){
   typeList[i].status = 1;
  }else{
   typeList[i].status=0;
  }
  break;
  }
 }
 this.setData({
  list: typeList
 });
 }
})

data

var list = [{
 "id": 1,
 "txt": "AA"
 },
 {
 "id": 2,
 "txt": "BB"
 },
 {
 "id": 3,
 "txt": "CC"
 },
 {
 "id": 4,
 "txt": "DD"
 },
 {
 "id": 5,
 "txt": "EE"
 },
 {
 "id": 6,
 "txt": "FF"
 },
 {
 "id": 7,
 "txt": "RR"
 },
 {
 "id": 8,
 "txt": "HH"
 },
 {
 "id": 9,
 "txt": "KK"
 },
 {
 "id": 10,
 "txt": "WW"
 }
]
module.exports = {
 postListData: list
}

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
javascript之锁定表格栏位
Jun 29 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
js微信支付实现代码
Dec 22 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
JavaScript实现随机五位数验证码
Sep 27 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 #Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 #Vue.js
基于Cesium绘制抛物弧线
Nov 18 #Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 #Vue.js
js实现简易计算器小功能
Nov 18 #Javascript
微信小程序实现购物车功能
Nov 18 #Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 #Vue.js
You might like
分享PHP入门的学习方法
2007/01/02 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
Python中的各种装饰器详解
2015/04/11 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
Python中的Cookie模块如何使用
2020/06/04 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
俄罗斯游戏商店:Buka
2020/03/01 全球购物
医学院毕业生自荐信
2013/11/08 职场文书
战友聚会邀请函
2014/01/18 职场文书
根叔历年演讲稿
2014/05/20 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
施工安全协议书
2016/03/22 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android
SQL Server 中的事务介绍
2022/05/20 SQL Server