微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果 下面来看一下代码: 首先WXML 然后WXSS(如果不想要动画,删掉wxss里的transition:transform 0.3s;和transition: height 0.3s;即可 ...
最近在做一个项目的时候,需要用到下拉框搜索,网上搜了半天没找到想要的,决心自己动手写一个。 首先看下效果图: 左边是输入框,可以进行模糊查询,右边图标进行选择。代码部分,我定义了五个参数,和一个自定义的方法,list:下拉框数组, width:组件宽度, height:组件高度,bind:action: 自定义方法考虑到每个人用的时候用的对象数组结构不同我预留了两个字段,做自定义 可不写 ,怎么样 ...
2019-07-31 11:18 3 1257 推荐指数:
微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果 下面来看一下代码: 首先WXML 然后WXSS(如果不想要动画,删掉wxss里的transition:transform 0.3s;和transition: height 0.3s;即可 ...
微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 wxss代码 js代码 效果 ...
...
主要就是红色标注的代码,当然相对路径不一样,直接复制需要修改路径。 ...
由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简单易用,支持多个浏览器。 不过在使用过程中碰到了几个问题,先后解决了。 1、多个下拉框放在 ...
一、源码地址 https://github.com/imxiaoer/WeChatMiniSelect 二、效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三、组件源码 ...
》》下拉组件 1.组件结构: 2.index.js: 3.index.json: 4.index.wxml: 5.index.wxss: 》》使用方式(引用组件的页面): 1.pindex.js ...
一开始是打算这样写, 直接用input输入框把picker的前面替换了,但是这个时候点击输入框,,下拉框也会弹出来 本来想阻止事件默认行为,结果搞半天没弄好,,于是我 就换了一种思路,就是把input输入框和picker给分开写,代码如下 然后设置css样式 ...