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


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 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
jquery常用操作小结
Jul 21 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
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
一个简洁的多级别论坛
2006/10/09 PHP
php mysql数据库操作分页类
2008/06/04 PHP
php whois查询API制作方法
2011/06/23 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
js的2种继承方式详解
2014/03/04 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
Python实现全角半角转换的方法
2014/08/18 Python
Python之PyUnit单元测试实例
2014/10/11 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
对Python信号处理模块signal详解
2019/01/09 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
详解Python 函数参数的拆解
2020/09/02 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
商务英语应届生自我鉴定
2013/12/08 职场文书
色戒观后感
2015/06/12 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
浅谈Web Storage API的使用
2021/06/23 Javascript
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL