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

一.效果图

二、实现原则

下拉列表的实现与网页的实现相同。开始不显示默认下拉的内容(display:none)，然后点击时通过改变显示的属性值来实现下拉效果。然后通过css3动画实现下拉动画。

CSS3中新增的属性动画用于实现对元素的动画效果，但动画不能单独执行动画效果。承载动画的另一个属性是—— @关键帧。为了兼容性，可以添加前缀，如-webkit-、-o-、-ms-、-moz-、-khtml-来适应不同的浏览器。

第三，源代码

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

index.wxml

！-page/one/index . wxml-view class=' page ' view class=' nav-son ' bind tap=' listpx ' view my下拉列表/view image src=' { { imgur } } '/image/view class=' temp { { px open？slidown ' : ' slidup ' } } { { pxshow，'对于=' { { content } } ' { { item } }/view/view button/button index . wxss，消失' : ' ' } } ' viewwx:

/*下拉列表的样式*/。nav-son {位置：相对；/*让下拉提示信息始终放在下拉内容之上*/z-index : 99；border-top: 1px实心# d1d3d4border-bottom: 1px实心# d1d3d4背景# fffdisplay: flex高度： 40px；align-items : center；font-size : 18px；}/*下拉列表下的三角形样式*/。nav-sonimage {位置：绝对；right: 30rpx宽度： 50 rpx；高度： 50 rpx；}/*下拉框的样式*/。默认情况下不显示temp {/* */display : none；/*下拉框的宽度，*/width : 100%；/*下拉框的最大高度*/max-height : 750 rpx；溢出-y:滚动；padding: 0 0 0 20rpx线高height:100rpx背景# fff}/*下拉框内容的样式*/。tempview { border-bottom : 1 pxsolid # d1d 3d 4；font-size : 14px；color: # 666}/*下拉动画*//* @关键帧Cs3新标签，循环动画*/@关键帧向下滑动{ from { transform : translate y(-100%)；}到{ transform : translateY(0%)；}}.slidown { display:块；animation : slid down . 2 ease-in两者；}/*上拉动画*/@关键帧向上滑动{从{transform :平移y(0%)；}到{ transform : translateY(-100%)；}}.slidup { display:块；animation: slidup .2s两者皆适用；高度： 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 . pxo pen){ this . setdata({ px pen : 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)} })iv。项目下载

https://github.com/yyzheng1729/menudown

动词（verb的缩写）类似条款的建议

微信小程序授权登录详解(带完整源代码)

微信小程序侧边栏滑动实现过程分析(带完整源代码)

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。