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

2024-03-20 09:35:29

一、效果图

二、实现原理

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

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

微信小程序下拉列表的实现实例代码

微信小程序下拉列表 wxml代码: <view class="phone_one" bindtap="clickPerson"> <view class="phone_personal">{{firstPerson}}</view> <image src="../../image/v6.png" class="personal_image {{selectArea ? 'r
微信小程序实现点击图片旋转180度并且弹出下拉列表

本文为大家分享了微信小程序实现图片旋转.下拉列表的具体代码,供大家参考,具体内容如下正文: 先上效果图: index.wxml <view class="phone_one" bindtap="clickPerson"> <view class="phone_personal">{{firstPerson}}</view> <image src="../../image/v6.png"
微信小程序实现城市列表选择

本文实例为大家分享了小程序实现城市列表选择的具体代码,供大家参考,具体内容如下实现效果预览实现功能简介城市的选择按中文/拼音/首字母条件搜索按首字字母快速定位到城市位置目录结构主要代码 app.js App({ globalData: { trainBeginCity: '杭州', trainEndCity: '北京' } }) app.json { "pages":[ "pages/index/index", "pages/citys/
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法.分享给大家供大家参考,具体如下: 微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把.微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理.本文将分享微信小程序列表的下拉刷新和上划加载的实践. 效果图首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画.下拉刷
微信小程序实现列表下拉刷新上拉加载

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 DEMO下载效果图原理利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,从而对页面数据进行修改! 页面配置JSON enablePullDownRefresh:开启下拉刷新: onReachBottomDistance:页面上拉触底事件触发时距页面底部距离,单位为px. { "enablePullDown
微信小程序列表的上拉加载和下拉刷新的实现

微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧. 不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧(通过聚合数据
微信小程序实现无限滚动列表

本文实例为大家分享了微信小程序实现无限滚动列表的具体代码,供大家参考,具体内容如下效果图1.0 实现方式是利用小程序原声组件swiper,方向设置为纵向 :vertical='true'设置同时显示的滑块数量:display-multiple-items='4'设置自动轮播:autoplay:'true'. 话不所说,直接上代码:  <view class='contentBottom'> <view class='BottomFirst'>
微信小程序授权登录详解（附完整源码）

一.前言由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发. 官方连接:https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01 二.实现思路自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过 button 组件去触发 getUserInof 接口.在用户进入微信小程序的时候,判断用户是否
微信小程序之下拉列表实现方法解析（附完整源码）

一.效果图二.实现原理跟网页的下拉列表实现是一样的,刚刚开始默认下拉的内容的是不显示的(display:none),然后通过点击的时候,去更改 display 的属性值,来实现下拉的效果.然后下拉的动画的通过 css3 的 animation 来实现的. CSS3中添加的新属性 animation 是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果.承载动画的另一个属性 -- @keyframes.使用的时候为了兼容可加上-webkit-.-o-.-ms-.-mo
微信小程序 Canvas增强组件实例详解及源码分享

WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas> JS: var wezrender = require('../../lib/wezrender'); zr = wezrender.zrender.init("
详解微信小程序实现跑马灯效果（附完整代码）

在微信小程序里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码:  <view class="marquee_container" style="--marqueeWidth--:-12em"> <view class="marquee_text">一个人活着就是为了让更多的人更好的活着!</v
微信小程序之侧边栏滑动实现过程解析（附完整源码）

一.效果图讲什么都不如直接上效果图好,所以我们先来看下实现效果如何. 通过滑动屏幕,或者点击左上角的图标按钮,都能实现侧边栏的划出效果. 二.原理解析 1.先实现侧边栏的内容,让侧边栏的内容居左,然后将侧边栏的内容置于屏幕的最底部. 2.接着实现主页的内容,并且让主页的内容默认是覆盖在侧边栏的内容上面. 3.然后,实现手指滑动屏幕的时候,主页的内容,向左滑动一定的宽度,让侧边栏的内容显示出来,而滑动的效果是通过 css 的 transition 来实现的. 三.源码由于实现过程的时,我对代码
微信小程序网络请求实现过程解析

这篇文章主要介绍了微信小程序网络请求实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下配置服务器域名: 每个微信小程序需要事先设置一个通讯域名,小程序只可以跟指定的域名进行网络通信. 服务器域名在:小程序后台=> 开发=> 开发设置 => 服务器域名中配置,配置时需注意: 1.域名只支持https(request, uploadFile,downloadFile)和wss(connectSocket)协议. 2.域名不能使用i
微信小程序 rich-text的使用方法

微信小程序 rich-text的使用方法 rich-text 属性:nodes 类型:Array / String 结点列表 / HTML String 全局支持class和style属性,不支持id属性. 结点类型:type = node , name 标签名 String 是支持部分受信任的HTML结点, attrs 属性 Object 否支持部分受信任的属性,遵循Pascal命名法 , children 子结点列表 Array 否结构和nodes一致结点类型:type = t
本地搭建微信小程序服务器的实现方法

本地搭建微信小程序服务器的实现方法现在开发需要购买服务器,价格还是有点贵的,可以花费小代价就可以搭建一个服务器,可以用来开发小程序,博客等. 1.域名(备案过的) 2.阿里云注册免费的https证书 3.配置本地的nginx 4.内网映射(本地安装wampserver 服务器) 一.域名注册花生壳,开通内网映射需要8元(我开通时需要,现在不清楚还要不要),里面可以注册2个免费的域名,都是免备案的.具体的请自行百度,花生壳注册地址二.申请阿里云免费的https证书阿里云免费的http
微信小程序 setData的使用方法详解

微信小程序 setData的使用方法详解最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元素的属性时,是这么使用的: Page({ data: { array: [{text: 'init data'}], }, changeItemInArray: function() { this.setData({ 'array[0].text':'changed data' }) } }) 使用了 'array[0].text' : '
微信小程序显示下拉列表功能【附源码下载】

本文实例讲述了微信小程序显示下拉列表功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 app.json文件: { "pages":[ "views/views", "views/navigators/navigator1/navigator1", "views/navigators/navigator2/navigator2", "views/navigators/navigator3/naviga

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

相关推荐

随机推荐