微信小程序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 相关文章推荐
基于jquery的给文章加入关键字链接
Oct 26 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
JS实现打砖块游戏
Feb 14 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 lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
Python urls.py的三种配置写法实例详解
2017/04/28 Python
Python类的继承和多态代码详解
2017/12/27 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
pycharm快捷键汇总
2020/02/14 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
公司委托书格式范本
2014/09/16 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL