微信小程序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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
Node.js fs模块原理及常见用途
Oct 22 Javascript
详解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+APACHE实现用户论证的方法
2006/10/09 PHP
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
js轮播图代码分享
2016/07/14 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
Python入门篇之面向对象
2014/10/20 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
CNC数控操作工岗位职责
2013/11/19 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
企业安全生产责任书
2014/04/14 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
三人合伙协议书范本
2014/10/29 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
Python OpenCV实现图形检测示例详解
2022/04/08 Python
关于mysql中string和number的转换问题
2022/06/14 MySQL