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


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 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
javascript实现数独解法
Mar 14 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 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+curl 发送图片处理代码分享
2015/07/09 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
Javascript 类与静态类的实现
2010/04/01 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
python 产生token及token验证的方法
2018/12/26 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
医院护理人员的自我评价分享
2013/10/04 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
授权委托书样本
2014/04/03 职场文书
园林系毕业生求职信
2014/06/23 职场文书
会计人员演讲稿
2014/09/11 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
python munch库的使用解析
2021/05/25 Python
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers