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


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 相关文章推荐
常用js脚本
Dec 03 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
让IE6支持min-width和max-width的方法
Jun 25 Javascript
Javascript的一种模块模式
Sep 08 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
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
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
php 魔术方法详解
2014/11/11 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
javascript History对象原理解析
2020/02/17 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
Python ini文件常用操作方法解析
2020/04/26 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
深圳茁壮笔试题
2015/05/28 面试题
自荐书范文
2013/12/08 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
实习证明模板
2015/06/16 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
微信早安问候语
2015/11/10 职场文书