微信小程序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 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
原生js实现碰撞检测
Mar 12 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
使用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
农民C键的运用技巧
2020/03/04 星际争霸
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
使用php清除bom示例
2014/03/03 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
7个JS基础知识总结
2014/03/05 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
探索webpack模块及webpack3新特性
2017/09/18 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
Python实现单词拼写检查
2015/04/25 Python
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
教师自我鉴定范文
2014/03/20 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
2015党建工作简报
2015/07/21 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技