微信小程序 简易搜索功能实现
先看效果图
挺简单的一个实现方法,导入外部js数据,将数据通过radio-group展示出来,根据数据里的status属性判断显不显示该项.
在搜索框内实时读取输入的数据,去除空格后将数据跟js里的name属性模糊对比,如果不一致就通过status属性隐藏该项
大概是这样一个思路,最下面有代码片段
wxml
<view> <view class="search"> <input placeholder=" 请输入国家名称" type="string" bindinput="searchInput" maxlength="15" /> </view> <view class="picker-view"> <radio-group bindchange="radioAear"> <label class="pick-lable" wx:for-items="{{provinces}}" wx:key="index" wx:if="{{item.status=='1'?true:false}}"> <view class="pick-lable-view"> <text bindtap="goIndex" data-index="{{index}}">{{item.name}}</text> <radio value="{{item.name}}" /> </view> <view class="line_short" /> </label> </radio-group> </view> </view>
wxss
`page{
width:100%;
height:100%;
background-color: #000;
}
.pick-lable{
width: 100%;
}
.search{
width: 82%;
height: 80rpx;
border: 2rpx solid #ffffff;
border-radius: 15rpx;
margin: 60rpx auto;
color: #4A5269;
display: flex;
}
.search input{
width: 80%;
margin-left:32rpx;
font-size: 28rpx;
margin-top:2%;
}
.picker-view{
margin-top: 0rpx;
width: 100%;
}
.pick-lable-view{
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 82%;
margin: 0 auto;
color:#CCCCCC;
}
.line_short{
margin: 20rpx 0 40rpx 9%;
height: 0;
border: 2rpx solid #4a5269;
}`
js
`var address = require("./country.js")
Page({
data: {
address: "", //导入的类
provinces: [], //保存数据
},
onLoad() {
this.setData({
provinces: address.countrys,
})
},
//选择后的事件
radioAear(e) {
var value = e.detail.value
this.setData({
}, () => {
console.log(value)
})
},
//搜索功能实现
searchInput(e) {
var searchtext = e.detail.value.replace(/\s+/g, '')
// var searchtext = e.detail.value.replace([\u4e00-\u9fa5])
if (searchtext != "") {
//循环查询数组中的name字段
for (var index in address.countrys) {
var num = address.countrys[index].name.indexOf(searchtext);
let temp = 'provinces[' + index + '].status';
//判断符不符合,不符合的隐藏
if (num !== -1) {
this.setData({
[temp]: 1,
})
}else{
this.setData({
[temp]: 0,
})
}
}
} else {
//搜索框为空时所有都显示
for (var index in address.countrys) {
let temp = 'provinces[' + index + '].status';
this.setData({
[temp]: 1,
})
}
}
},
})`
代码片段: https://developers.weixin.qq.com/s/S5bW6Qm97HsL
微信小程序 简易搜索功能实现的更多相关文章
- 全栈项目|小书架|微信小程序-实现搜索功能
效果图 上图是小程序端实现的搜索功能效果图. 从图中可以看出点击首页搜索按钮即可进入搜索页面. 布局样式是:搜索框 + 热搜内容 + 搜索列表. 搜索框使用 lin-ui 中的 Searchbar组件 ...
- 微信小程序调用蓝牙功能控制车位锁
第一次学用微信小程序,项目需要,被逼着研究了一下,功能是调用微信小程序的蓝牙功能,连接上智能车位锁,控制升降,大概步骤及调用的小程序接口API如下: 1.打开蓝牙模块 wx.openBluetooth ...
- 微信小程序-简易计算器
代码地址如下:http://www.demodashi.com/demo/14210.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序开发-蓝牙功能开发
0. 前言 这两天刚好了解了一下微信小程序的蓝牙功能.主要用于配网功能.发现微信的小程序蓝牙API已经封装的很好了.编程起来很方便.什么蓝牙知识都不懂的情况下,不到两天就晚上数据的收发了,剩下的就是数 ...
- 微信小程序新闻列表功能(读取文件、template模板使用)
微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...
- 微信小程序实战 购物车功能
代码地址如下:http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/ ...
- 微信小程序在线支付功能使用总结
最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出 ...
- 微信小程序简易教程
刚接触到微信小程序开发,这里做一个简单的教程: 1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开 ...
- 微信小程序之购物车功能
前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消, ...
随机推荐
- 『心善渊』Selenium3.0基础 — 25、unittest单元测试框架
目录 1.unittest基本简介 2.unittest基本概念 (1)unittest核心的四个概念 (2)如何创建一个测试类 (3)test fixture常用的四个方法 (4)unittest编 ...
- java基础---设计模式(1)
出处:https://blog.csdn.net/zhangerqing/article/details/8194653 java的设计模式分为三大类 创建型模式: 工厂方法模式.抽象工厂模式.单例模 ...
- shell编程之循环语句for / while / until
shell编程之循环语句与函数 一.条件测试 二.循环语句 ① for循环语句结构(遍历) 示例1 示例2 ② while循环语句结构(迭代) 示例1 示例2 ③ until 循环语句结构 示例1 一 ...
- 如何快速更新长缓存的 HTTP 资源
前言 HTTP 缓存时间一直让开发者头疼.时间太短,性能不够好:时间太长,更新不及时.当遇到严重问题需紧急修复时,尽管后端文件可快速替换,但前端文件仍从本地缓存加载,导致更新长时间无法生效. 对于这个 ...
- Java的标准日志
虽然开源社区有很多优秀的日志框架,但我们学习标准的java日志框架是为了更好的理解其他框架啊(近期项目要用ELK) 看自己以前写的Log4J简直不忍直视啊啊啊啊,那时还感觉自我良好 1. 为什么要使用 ...
- 在Linux下安装node及npm
1.解压 # tar Jxf node-v12.18.3-linux-x64.tar.xz 2.移动到指定目录 # mv node-v12.18.3-linux-x64 /usr/local/nod ...
- Java程序员必学知识点
JVM无论什么级别的Java从业者,JVM都是进阶时必须迈过的坎.不管是工作还是面试中,JVM都是必考题.如果不懂JVM的话,薪酬会非常吃亏(近70%的面试者挂在JVM上了) 详细介绍了JVM有关于线 ...
- Springboot+Mybatis+小程序
思维导图: 项目效果图 一览界面: 新增界面:
- Python自动化测试面试题-经验篇
目录 Python自动化测试面试题-经验篇 Python自动化测试面试题-用例设计篇 Python自动化测试面试题-Linux篇 Python自动化测试面试题-MySQL篇 Python自动化测试面试 ...
- Hadoop (8088)未授权访问
cd /vulhub/hadoop/unauthorized-yarn 加速下载环境 sudo vim /etc/docker/daemon.json 添加 {"registry-mirro ...