微信小程序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学习笔记(七) js函数介绍
Jun 19 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
微信小程序实现底部导航
Nov 05 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 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
swfupload 多文件上传实现代码
2008/08/27 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
浅谈React高阶组件
2018/03/28 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
NFL官方在线商店:NFLShop
2020/07/29 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
laravel使用redis队列实例讲解
2021/03/23 PHP
残疾人创业典型事迹
2014/02/01 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
学校联谊协议书
2014/09/16 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL