小程序-手写下拉组件,实现搜索、弹出、关闭、点击选择、静态数据模糊查询等
发布日期:2021-06-29 17:04:57
浏览次数:3
分类:技术文章
本文共 3237 字,大约阅读时间需要 10 分钟。
小程序-手写下拉组件,实现弹出、关闭、点击选择、静态数据模糊查询等
wxml
请选择小区 X 选择 { {sectionlist.name}}
wxss
#cp_tanchuang_body{ width: 100%; height: 300px; background-color: #e9e9e9; padding: 10px; overflow: hidden; position: absolute; bottom: 0px; z-index: 1000;}.cp_tanchuang_x{ position: absolute; right:50px; width: 30PX; height: 30PX; font-size: 20PX; font-weight: 600; text-align: right; z-index: 1001;}.wx-input{ width: 70%; height: 34px; margin-top:10px; background-color: #fff; border: #eee solid 1px; display:inline-block;}.wx-button{ display: inline-block; width: 20%; height: 36px; line-height: 36px;}.section__body{ width: 100%; height: 300px; overflow:scroll; }.section__list{ height: 36px; line-height: 36px; padding-left:10px; border-bottom: #e5e5e5 solid 1px;}
js
var sectionlist_arr = new Array();//再定义一个数组接收查询出来的值Page({ data: { sectionlist_data: [ { id: 100, name: '美国1' }, { id: 2, name: '中国2' }, { id: 3, name: '巴西3' }, { id: 4, name: '日本4' }, { id: 5, name: '中国5' }, { id: 6, name: '巴西6' }, { id: 7, name: '日本7' }, { id: 8, name: '美国8' }, { id: 9, name: '中国9' }, { id: 10, name: '巴西10' }, { id: 11, name: '日本11' }, { id: 12, name: '中国12' }, { id: 13, name: '巴西13' }, { id: 14, name: '日本14' }, ], sectionlist: "", input_value:"", input_so_value: "", xq_name:"--未选择--", hiddenState:true }, //弹出菜单 cp_tanchuang: function (e) { console.log('/', e) this.setData({ hiddenState: false, input_value:"", sectionlist: this.data.sectionlist_data }) }, //关闭菜单 cp_tanchuang_X: function (e) { this.setData({ hiddenState: true }) }, //点击列表赋值 section_clink: function (e) { console.log('/', e) console.log('你选择了id=' + e.target.dataset.section_list_id + ",name=" + e.target.dataset.section_list_name) this.setData({ xq_name: e.target.dataset.section_list_name, hiddenState: true }) }, //获取输入框的值 bind_input_so_value: function (e) { this.setData({ input_so_value: e.detail.value }) }, //输入时便利数组 txt_input: function () { console.log('你输入的数据为:', this.data.input_so_value) sectionlist_arr=[]; this.data.sectionlist = this.data.sectionlist_data; var zhi = "";//接收每个循环中的arr[i]的值 //以下for语句为测试数据遍历,如果在实际项目中使用的话应做ajax查询返回 for (var i = 0; i < this.data.sectionlist.length; i++) { zhi = this.data.sectionlist[i].name; if (zhi.indexOf(this.data.input_so_value) != -1) { //因为indexof找不到的时候是一律为-1,所以直接判断是否为-1,不是就弹出这个值 sectionlist_arr.push(this.data.sectionlist[i]);//将值放入第二个数组 } } this.setData({ sectionlist: sectionlist_arr }) }, onLoad: function () { this.sectionlist_arr=[]; this.setData({ sectionlist: this.data.sectionlist_data }) }})
转载地址:https://cplvfx.blog.csdn.net/article/details/102769758 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
逛到本站,mark一下
[***.202.152.39]2024年04月20日 21时01分41秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
40. 组合总和 II 坑爹的输出
2021-07-03
c++ unique()函数,用来给vector去重
2021-07-03
LeetCode 206. Reverse Linked List 初次接触链表反转
2021-07-03
LeetCode89.Gray Code 格雷编码
2021-07-03
LeetCode 112. 路径总和
2021-07-03
[c++] 迭代器的一些测试(迭代器二分)
2021-07-03
LeetCode532. 数组中的K-diff数对
2021-07-03
LeetCode 双指针判断环路
2021-07-03
LeetCode 链表翻转相关(24 25)
2021-07-03
二叉树的创建搜索以及遍历,简单易懂
2021-07-03
打印二叉树的方法
2021-07-03
c++输出全排列函数
2021-07-03
求乘法逆元
2021-07-03
蓝桥杯校赛
2021-07-03
leetcode 475供暖器
2021-07-03
刷题中常用的方法总结
2021-07-03
第十届蓝桥杯B组C/C++总结
2021-07-03
蓝桥杯第四届省赛C/C++A组个人题解
2021-07-03
蓝桥杯第四届省赛C/C++B组个人题解
2021-07-03
Java编译程序包不存在
2021-07-03