微信小程序select下拉框实现效果


Posted in Javascript onMay 15, 2019

微信小程序select下拉框实现效果

小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉

 这里为了更清楚的显示层级 就把源码直接复制过来了

<view class='list-msg'>
 <view class='list-msg1'>
  <text>商品金额</text>
  <text>¥99.00</text>
 </view>
<!--下拉框 -->
 <view class='list-msg2' bindtap='bindShowMsg'>
  <text>{{tihuoWay}}</text>
  <image style='height:20rpx;width:20rpx;' src='/images/down.png'></image>
 </view>
 <view class='list-msg1'>
  <text>运费</text>
  <text></text>免邮</view>
 <view class='list-msg1'>
  <text>实际付款</text>
  <text style='color:red'>¥99.00</text>
 </view>
<!-- 下拉需要显示的列表 -->
 <view class="select_box" wx:if="{{select}}">
  <view class="select_one" bindtap="mySelect" data-name="重庆分店">重庆分店</view>
  <view class="select_one" bindtap="mySelect" data-name="东莞南城分店">东莞南城分店</view>
  <view class="select_one" bindtap="mySelect" data-name="东莞总店">东莞总店</view>
 </view>
</view>

下面是js代码

Page({
 
 /**
  * 页面的初始数据
  */
 data: {
  select: false,
  tihuoWay: '门店自提'
 },
 
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
 
 },
 bindShowMsg() {
   this.setData({
    select:!this.data.select
   })
 },
 mySelect(e) {
  var name = e.currentTarget.dataset.name
  this.setData({
   tihuoWay: name,
   select: false
  })
 },
 
 
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 
 }
})
.list-msg {
 padding: 0 20rpx;
 background-color: #fff;
 position: relative;
}
 
.list-msg1 {
 height: 60rpx;
 display: flex;
 align-items: center;
 justify-content: space-between;
}
 
.list-msg .list-msg2 {
 height: 60rpx;
 display: flex;
 align-items: center;
 justify-content: space-between;
 border: 1px solid #ccc;
 padding: 0 10rpx;
}
 
.select_box {
 background-color: #eee;
 padding: 0 10rpx;
 width: 93%;
 position: absolute;
 top: 130rpx;
 z-index: 1;
 overflow: hidden;
 animation: myfirst 0.5s;
}
 
@keyframes myfirst {
 from {
  height: 0rpx;
 }
 
 to {
  height: 210rpx;
 }
}
 
.select_one {
 height: 60rpx;
 line-height: 60rpx;
 border-bottom: 1px solid #ccc;
}

以上所述是小编给大家介绍的微信小程序select下拉框实现效果详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 面向对象编程基础:继承
Aug 21 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
详解js常用分割取字符串的方法
May 15 #Javascript
elementUI table表格动态合并的示例代码
May 15 #Javascript
详解VUE调用本地json的使用方法
May 15 #Javascript
微信小程序的mpvue框架快速上手指南
May 15 #Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 #Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 #Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 #Javascript
You might like
在PHP中执行系统外部命令
2006/10/09 PHP
PHP静态类
2006/11/25 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
Yii使用技巧大汇总
2015/12/29 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
js Date概念详细介绍
2013/11/22 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Python selenium如何设置等待时间
2016/09/15 Python
使用python实现简单五子棋游戏
2019/06/18 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
幼儿教师自我鉴定
2013/11/02 职场文书
小学运动会开幕词
2015/01/28 职场文书
党员活动总结
2015/02/04 职场文书
销售工作决心书
2015/02/04 职场文书
大学生团员个人总结
2015/02/14 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL