前端技术开发的汽车比赛小游戏 |
web前端开发技术聂常红 |
目前前端开发用到的技术 |
1、wxml文件
<input type=’text’ confirm-type=’search’ bindinput=’input1′ bindconfirm=’confirm1′ style=’border:1px solid #f00’/>//搜索框
<view wx:for=”{{hosList}}” wx:for-item=”h”>
<text wx:if=”{{h.show}}”>{{h.name}}</text>
</view>
2、js文件
Page({
data: {
hosList:[]//页面显示的数据
},
input1:function(e){//输入时 实时调用搜索方法
this.search(e.detail.value)
},
confirm1:function(e){//软键盘 搜索按钮 调用 (此方法可不用)
this.search(e.detail.value)
},
search:function(key){//搜索方法 key 用户输入的查询字段
var This = this;
var hosList = wx.getStorage({
key: 'hosList',
success: function(res) {//从storage中取出存储的数据
if (key == "") {//用户没有输入 全部显示
This.setData({
hosList: res.data
})
return;
}
var arr = [];//临时数组 用于存放匹配到的数据
for (let i in res.data) {
res.data[i].show = false; //所有数据隐藏
if (res.data[i].search.indexOf(key) >= 0) { //查找
res.data[i].show = true;//匹配到的数据显示
arr.push(res.data[i])
}
}
if (arr.length==0){
This.setData({
hosList: [{show:true,name:'无相关数据'}]
})
}else{
This.setData({
hosList: arr//找到的数据在页面显示
})
}
},
})
},
/**
- 生命周期函数–监听页面加载
*/
onLoad: function (options) {
var hosList= [
{ id: 101, name: “杭州第一医院”, show: true, search: “101杭州第一医院” },
{ id: 102, name: “杭州第二医院”, show: true, search: “102杭州第二医院” },
{ id: 103, name: “温州第一医院”, show: true, search: “103温州第一医院” },
{ id: 201, name: “温州第二医院”, show: true, search: “201温州第二医院” },
{ id: 202, name: “杭州儿童医院”, show: true, search: “202杭州儿童医院” },
{ id: 203, name: “杭州妇产医院”, show: true, search: “203杭州妇产医院” },
{ id: 301, name: “杭州肿瘤医院”, show: true, search: “301杭州肿瘤医院” },
{ id: 302, name: “杭州牙科医院”, show: true, search: “302杭州牙科医院” },
{ id: 303, name: “杭州猫狗医院”, show: true, search: “303杭州猫狗医院” }
]//后台取得的数据( 可以是在其他页面的获取,比如登录的时候获取) show 用来控制此条数据是否显示 search 匹配搜索的内容
wx.setStorage({//获取的时候存储在本地
key: ‘hosList’,
data: hosList,
})
this.setData({
hosList: hosList//页面加载时 显示所有数据
})
}
})
在页面中,就能实现搜索的功能了
web前端开发技术储久良答案 |
web前端技术开发 |
web前端开发技术的实践教学 |
» 本文来自:前端开发者 » 《前端开发微信小程序实现列表搜索功能》
» 本文链接地址:https://www.rokub.com/7924.html
» 您也可以订阅本站:https://www.rokub.com
评论前必须登录!
注册