微信小程序select下拉框实现源码


Posted in Javascript onNovember 08, 2019

这篇文章主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

微信小程序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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
js模糊查询实例分享
Dec 26 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
使用kbone解决Vue项目同时支持小程序问题
Nov 08 #Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 #Javascript
vue中在vuex的actions中请求数据实例
Nov 08 #Javascript
vue 组件内获取actions的response方式
Nov 08 #Javascript
在vue中使用vuex,修改state的值示例
Nov 08 #Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 #Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 #Javascript
You might like
dedecms系统常用术语汇总
2007/04/03 PHP
php 删除数组元素
2009/01/16 PHP
php将数据库导出成excel的方法
2010/05/07 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
python抓取网页中图片并保存到本地
2015/12/01 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
django如何连接已存在数据的数据库
2018/08/14 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
Python 如何在字符串中插入变量
2020/08/01 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
基于Python 函数和方法的区别说明
2021/03/24 Python
网站编辑求职信
2013/10/17 职场文书
安全生产承诺书范文
2014/05/22 职场文书
相亲活动方案
2014/08/26 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书