尚武科技——负责任的企业公民

尚武十年[点击进入]

科技以人为本
尚武旗下网站
尚武科技
搜索图标
Sitemap | Mail | 合作答疑 | 招贤纳士
网站公告 尚武科技服务热线:0311-87882018
   
我们是谁  |  企业文化  |  新闻动态  |  加入我们  |  行业知识
微信小程序模拟select下拉菜单

 

  在微信小程序开发工作中遇到了这样的一个需求,在发货的时候选择快递公司,这个需求听上去很简单不就是一个select下拉菜单吗?有什么难的,可是我翻遍了微信小程序开发文档都没有找到关于select下拉菜单的api,所以我们直能通过微信小程序的特性模拟一个出来,接下来就由石家庄网站建设工程师为大家详细介绍。

石家庄网站建设

  为了大家更容易的理解,在接下来的代码图片中就不用xw:for循环了,在大家的生产环境中记得要用循环。

 

  首先是wxml,标签绑定data-name=“快递公司1”,方便以后再js中知道点击的值是多少,在绑定利用bindtap绑定mySelect事件。

石家庄网站建设

  接下来是wxss部分这部分没有什么好说的,主要是根据效果图生产出相应的模样,重要的一点就是一定要用css3的@keyframes动画属性,这样可以用让模拟的下拉菜单更加真实。

石家庄网站建设

  接下来就是主要的js功能的实现了

  第一步:我们需要在data中规定两值一个是下拉菜单是否显示,另一个就是选中以后在文本框里的值。

石家庄网站建设

  第二步:我们要让下拉菜单展示出来,我们就需要在其没有出现下拉菜单的元素添加事件,点击改变data中select的值

石家庄网站建设

  第三步:做到现在我们的下拉菜单已经出来了,就是点击项没有反应,还记得我们刚才绑定到下拉项的值和事件吗?我们需要通过事件获取到值动态添加到data的tihuoWay中,添加完成后记得关闭下拉菜单。

石家庄网站建设

  重点摘要:

  1. 在下拉项中用data-name中传值

 

  2. 在data中要规定两个值,分别为控制下拉菜单隐藏显示和菜单里面的值

 

  3. 此代码只做演示没有优化不能直接拿到生产过程中,需要懂其原理在进行优化

 

  以上关于微信小程序模拟select下拉菜单均属石家庄网站建设工程师的个人观点,大家如果对此有着不同的见解,可以关注公众号“尚武科技派”给我留言,大家可以交流一下自己的心德体会,共同学习进步。

 




上一篇:工具类图标设计规范(二)             下一篇:单页网站设计:10条提示及想法

标签:石家庄网站建设
尚武科技
睿亿网络用心服务的团队,竭诚为您服务 客服不能及时回复您,您可点击QQ进行交谈
欲了解业务详情,请拨打咨询热线:
总部电话:0311-87882018    值班电话:15512183667
在线服务: 尚武科技售前专员   尚武科技售前专员  尚武科技技术专员  尚武科技美工专员  尚武科技售后专员  
Copyright © 2008-2019 尚武科技 保留所有权利 >冀ICP备07012169号    Copyright © 2008 www.sw-tech.cn, Inc. All rights reserved