微信小程序-下拉菜单

转载地址:https://blog.csdn.net/weidong_y/article/details/82290720#

目录

一、效果图

二、实现原理

三、源码

四、项目下载

同类文章推荐:

更多干货关注公众号:


 


一、效果图

二、实现原理

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

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

三、源码

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

index.wxml


 
 
  1. <!--page/one/index.wxml-->
  2. <view class="page">
  3. <view class="nav-son" bindtap="listpx">
  4. <view>我的下拉列表 </view>
  5. <image src='{{imgUrl}}'> </image>
  6. </view>
  7. <view class="temp {{pxopen ? 'slidown' : 'slidup'}} {{pxshow ? 'disappear':''}}">
  8. <view wx:for="{{content}}">
  9. {{item}}
  10. </view>
  11. </view>
  12. </view>
  13. <button>按钮 </button>

index.wxss


 
 
  1. /* 下拉列表的样式 */
  2. .nav-son{
  3. position: relative;
  4. /* 让下拉提示信息永远放于下拉内容的上面 */
  5. z-index: 99;
  6. border-top: 1px solid #d1d3d4;
  7. border-bottom: 1px solid #d1d3d4;
  8. background: #fff;
  9. display: flex;
  10. height: 40px;
  11. align-items:center;
  12. font-size: 18px;
  13. }
  14. /* 下拉列表 下三角的样式 */
  15. .nav-son image{
  16. position: absolute;
  17. right: 30rpx;
  18. width: 50rpx;
  19. height: 50rpx;
  20. }
  21. /* 下拉框的样式 */
  22. .temp{
  23. /* 默认为不显示 */
  24. display:none;
  25. /* 下拉框的宽度, */
  26. width: 100%;
  27. /* 下拉框的最大高度 */
  28. max-height: 750rpx;
  29. overflow-y: scroll;
  30. padding: 0 0 0 20rpx;
  31. line-height: 100rpx;
  32. background: #fff;
  33. }
  34. /* 下拉框内容的样式 */
  35. .temp view{
  36. border-bottom: 1px solid #d1d3d4;
  37. font-size: 14px;
  38. color: #666;
  39. }
  40. /* 下拉动画 */
  41. /* @keyframes Css3 新标签,循环动画 */
  42. @ keyframes slidown{
  43. from{
  44. transform: translateY(-100%);
  45. }
  46. to{
  47. transform: translateY(0%);
  48. }
  49. }
  50. .slidown{
  51. display: block;
  52. animation: slidown . 2s ease-in both;
  53. }
  54. /* 上拉动画 */
  55. @ keyframes slidup{
  56. from{
  57. transform: translateY(0%);
  58. }
  59. to{
  60. transform: translateY(-100%);
  61. }
  62. }
  63. .slidup{
  64. display: block;
  65. animation: slidup . 2s ease-in both;
  66. height: 0px;
  67. }

index.js


 
 
  1. Page({
  2. data: {
  3. content: [],
  4. px: [],
  5. pxopen: false,
  6. pxshow: false,
  7. active: true,
  8. imgUrl: "../../images/down.png"
  9. },
  10. onLoad: function() {
  11. this.setData({
  12. px: [ '>默认排序', '>离我最近']
  13. })
  14. },
  15. listpx: function(e) {
  16. console.log(e)
  17. if ( this.data.pxopen) {
  18. this.setData({
  19. pxopen: false,
  20. pxshow: false,
  21. active: true,
  22. imgUrl: "../../images/down.png"
  23. })
  24. } else {
  25. this.setData({
  26. content: this.data.px,
  27. pxopen: true,
  28. pxshow: false,
  29. active: false,
  30. imgUrl: "../../images/up.png"
  31. })
  32. }
  33. console.log(e.target)
  34. }
  35. })

四、项目下载

https://github.com/yyzheng1729/menudown

同类文章推荐:

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

微信小程序之授权登录的实现(附完整源码)

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值