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

 

目录

一、效果图

二、实现原理

三、源码

四、项目下载

五、同类文章推荐:

六、福利:视频资源分享

     


一、效果图

二、实现原理

跟网页的下拉列表实现是一样的,刚刚开始默认下拉的内容的是不显示的(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)
    }
})

四、项目下载

https://github.com/yyzheng1729/menudown

五、同类文章推荐:

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

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

六、福利:视频资源分享

需要以下微信小程序项目教学视频的,可以关注下面的公众号,回复“小程序”即可获取百度云分享链接!如果失效的话,可以在公众号上面私信我。

更多小程序干货可关注博主的公众号: 

     

  • 16
    点赞
  • 93
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
如果您下载了本程序,但是该程序存在问题无法运行,那么您可以选择退款或者寻求我们的帮助(如果找我们帮助的话,是需要追加额外费用的)。另外,您不会使用资源的话(这种情况不支持退款),也可以找我们帮助(需要追加额外费用) 微信小程序是腾讯公司基于微信平台推出的一种轻量级应用形态,它无需用户下载安装即可在微信内直接使用。自2017年正式上线以来,小程序凭借其便捷性、易获取性和出色的用户体验迅速获得市场认可,并成为连接线上线下服务的重要桥梁。 小程序的核心特点包括: 零安装:用户只需通过微信扫一扫或搜索功能,即可打开和使用小程序,大大降低了用户的使用门槛和手机存储空间压力。 速度快:加载速度相较于传统的HTML5网页更快,依托于微信强大的基础设施,能够实现近乎原生应用的流畅体验。 跨平台兼容:开发者一次开发,即可在多种终端设备上运行,免除了复杂的适配工作,大大提高了开发效率。 社交属性强:小程序可以无缝嵌入微信生态,支持分享至聊天窗口、朋友圈等社交场景,有利于用户间的传播和裂变增长。 丰富接口能力:提供丰富的API接口,可调用微信支付、位置服务、用户身份识别等多种功能,方便企业进行商业服务的集成与拓展。 目前,微信小程序已经覆盖了电商购物、生活服务、娱乐休闲、教育学习、工具助手等多个领域,为数以亿计的用户提供便捷的服务入口,也为众多商家和开发者提供了新的商业模式和创业机会。随着技术的不断升级和完善,小程序已成为现代移动互联网生态中不可或缺的一部分。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值