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


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 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
javascript options属性集合操作代码
Dec 28 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
js+audio实现音乐播放器
Sep 13 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学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
php提取微信账单的有效信息
2018/10/01 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
python判断字符串是否纯数字的方法
2014/11/19 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
《Python学习手册》学习总结
2018/01/17 Python
基于python实现简单日历
2018/07/28 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
.net开发工程师面试题
2014/02/25 面试题
中间件分为哪几类
2012/03/14 面试题
中专毕业生自荐信范文
2013/11/28 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
出纳岗位职责
2015/01/31 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers
python中filter,map,reduce的作用
2022/06/10 Python