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


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 相关文章推荐
JavaScript中原型和原型链详解
Feb 11 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
vuejs指令详解
Feb 07 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
JS ES6异步解决方案
Apr 29 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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性能测试工具xhprof的详解
2013/06/03 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
Vue中key的作用示例代码详解
2020/06/10 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python实现图片转字符画的示例
2017/08/22 Python
Python装饰器用法实例分析
2019/01/14 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
开办大学饮食联盟创业计划书
2014/01/29 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
企业宣传策划方案
2014/05/29 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
辞职信格式模板
2015/02/27 职场文书
导游词之塘栖古镇
2019/12/04 职场文书