微信小程序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中检测变量是否存在遇到的一些问题
Nov 11 Javascript
jQuery选择器全面总结
Jan 06 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
JS实现购物车基本功能
Nov 08 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
PHP5 面向对象(学习记录)
2009/12/02 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
python写入xml文件的方法
2015/05/08 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
python数值基础知识浅析
2019/11/19 Python
python groupby 函数 as_index详解
2019/12/16 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
python 制作本地应用搜索工具
2021/02/27 Python
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
护士试用期自我鉴定
2014/02/08 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
php去除deprecated的实例方法
2021/11/17 PHP
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android
vue elementUI表格控制对应列
2022/04/13 Vue.js
CSS的calc函数用法小结
2022/06/25 HTML / CSS