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


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 相关文章推荐
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
mocha的时序规则讲解
Feb 16 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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
用文本作数据处理
2006/10/09 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
jquery.cookie.js使用指南
2015/01/05 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
python中的函数用法入门教程
2014/09/02 Python
python开发之文件操作用法实例
2015/11/13 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
python基础教程项目三之万能的XML
2018/04/02 Python
实例讲解python中的序列化知识点
2018/10/08 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
python如何导入依赖包
2020/07/13 Python
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
大学活动策划书范文
2014/01/10 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
升职自荐信怎么写
2015/03/05 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
建国大业电影观后感
2015/06/01 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书