微信小程序之下拉列表实现方法解析(附完整源码)


Posted in Javascript onAugust 23, 2019

一、效果图

微信小程序之下拉列表实现方法解析(附完整源码)

二、实现原理

跟网页的下拉列表实现是一样的,刚刚开始默认下拉的内容的是不显示的(display:none),然后通过点击的时候,去更改 display 的属性值,来实现下拉的效果。然后下拉的动画的通过 css3 的 animation 来实现的。

CSS3中添加的新属性 animation 是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果。承载动画的另一个属性 —— @keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。

三、源码

实现比较简单,代码带有必要的解释,所有就不赘述了。如果有什么看不懂的,可以在评论区提问,博主每天都会回复的。

index.wxml

<!--page/one/index.wxml-->
<view class="page">
 <view class="nav-son" bindtap="listpx">
  <view>我的下拉列表</view>
  <image src='{{imgUrl}}'></image>
 </view>
 
 <view class="temp {{pxopen ? 'slidown' : 'slidup'}} {{pxshow ? 'disappear':''}}">
  <view wx:for="{{content}}">
   {{item}}
  </view>
 </view>
</view>
<button>按钮</button>

index.wxss

/* 下拉列表的样式 */
.nav-son{
 position: relative;
 /* 让下拉提示信息永远放于下拉内容的上面 */
 z-index: 99;
 border-top: 1px solid #d1d3d4;
 border-bottom: 1px solid #d1d3d4;
 background: #fff;
 display: flex;
 height: 40px;
 align-items:center;
 font-size: 18px;
}
/* 下拉列表 下三角的样式 */
.nav-son image{
 position: absolute;
 right: 30rpx;
 width: 50rpx;
 height: 50rpx;
}
 
/* 下拉框的样式 */
.temp{
 /* 默认为不显示 */
 display:none;
 /* 下拉框的宽度, */
 width: 100%;
 /* 下拉框的最大高度 */
 max-height: 750rpx;
 overflow-y: scroll;
 padding: 0 0 0 20rpx;
 line-height:100rpx;
 background: #fff;
}
 
/* 下拉框内容的样式 */
.temp view{
 border-bottom: 1px solid #d1d3d4;
 font-size: 14px;
 color: #666;
}
 
/* 下拉动画 */
/* @keyframes Css3 新标签,循环动画 */
@keyframes slidown{
 from{
  transform: translateY(-100%);
 }
 to{
  transform: translateY(0%);
 }
}
.slidown{
 display: block;
 animation: slidown .2s ease-in both;
}
 
/* 上拉动画 */
@keyframes slidup{
 from{
  transform: translateY(0%);
 }
 to{
  transform: translateY(-100%);
 }
}
.slidup{
 display: block;
 animation: slidup .2s ease-in both;
 height: 0px;
}

index.js

Page({
 data: {
  content: [],
  px: [],
  pxopen: false,
  pxshow: false,
  active:true,
  imgUrl: "../../images/down.png"
 },
 onLoad: function() {
  this.setData({
   px: ['>默认排序', '>离我最近']
  })
 },
 listpx: function(e) {
  console.log(e)
  if (this.data.pxopen) {
   this.setData({
    pxopen: false,
    pxshow: false,
    active: true,
    imgUrl: "../../images/down.png"
   })
  } else {
   this.setData({
    content: this.data.px,
    pxopen: true,
    pxshow: false,
    active:false,
    imgUrl: "../../images/up.png"
   })
  }
  console.log(e.target)
 }
})

四、项目下载

微信小程序之侧边栏滑动实现过程解析(附完整源码)

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

Javascript 相关文章推荐
jquery 操作DOM案例代码分享
Apr 05 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
canvas绘制的直线动画
Jan 23 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 #Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 #Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 #Javascript
VUE实现移动端列表筛选功能
Aug 23 #Javascript
简述ES6新增关键字let与var的区别
Aug 23 #Javascript
微信小程序后台持续定位功能使用详解
Aug 23 #Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 #Javascript
You might like
PHP中动态HTML的输出技术
2006/10/09 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
Js+XML 操作
2006/09/20 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
工程款申请报告
2015/05/15 职场文书
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL
js基础语法与maven项目配置教程案例
2021/07/15 Javascript