微信小程序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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
微信小程序实现底部弹出框
Nov 18 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调用c接口无错版介绍
2014/03/11 PHP
php操作redis缓存方法分享
2015/06/03 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
Smarty变量用法详解
2016/05/11 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
layui的select联动实现代码
2019/09/28 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python发送伪造的arp请求
2014/01/09 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
Python线性回归实战分析
2018/02/01 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
django的ORM操作 增加和查询
2019/07/26 Python
Django如何实现上传图片功能
2019/08/16 Python
python实现ip地址的包含关系判断
2020/02/07 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
小学生家长评语集锦
2014/01/30 职场文书
商场中秋节活动方案
2014/02/07 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
党员三严三实心得体会
2014/10/13 职场文书
违纪检讨书范文
2015/01/27 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python