先看效果图

挺简单的一个实现方法,导入外部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

微信小程序 简易搜索功能实现的更多相关文章

  1. 全栈项目|小书架|微信小程序-实现搜索功能

    效果图 上图是小程序端实现的搜索功能效果图. 从图中可以看出点击首页搜索按钮即可进入搜索页面. 布局样式是:搜索框 + 热搜内容 + 搜索列表. 搜索框使用 lin-ui 中的 Searchbar组件 ...

  2. 微信小程序调用蓝牙功能控制车位锁

    第一次学用微信小程序,项目需要,被逼着研究了一下,功能是调用微信小程序的蓝牙功能,连接上智能车位锁,控制升降,大概步骤及调用的小程序接口API如下: 1.打开蓝牙模块 wx.openBluetooth ...

  3. 微信小程序-简易计算器

    代码地址如下:http://www.demodashi.com/demo/14210.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  4. 微信小程序开发-蓝牙功能开发

    0. 前言 这两天刚好了解了一下微信小程序的蓝牙功能.主要用于配网功能.发现微信的小程序蓝牙API已经封装的很好了.编程起来很方便.什么蓝牙知识都不懂的情况下,不到两天就晚上数据的收发了,剩下的就是数 ...

  5. 微信小程序新闻列表功能(读取文件、template模板使用)

    微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...

  6. 微信小程序实战 购物车功能

    代码地址如下:http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/ ...

  7. 微信小程序在线支付功能使用总结

    最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出 ...

  8. 微信小程序简易教程

    刚接触到微信小程序开发,这里做一个简单的教程: 1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开 ...

  9. 微信小程序之购物车功能

    前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消, ...

随机推荐

  1. 『心善渊』Selenium3.0基础 — 25、unittest单元测试框架

    目录 1.unittest基本简介 2.unittest基本概念 (1)unittest核心的四个概念 (2)如何创建一个测试类 (3)test fixture常用的四个方法 (4)unittest编 ...

  2. java基础---设计模式(1)

    出处:https://blog.csdn.net/zhangerqing/article/details/8194653 java的设计模式分为三大类 创建型模式: 工厂方法模式.抽象工厂模式.单例模 ...

  3. shell编程之循环语句for / while / until

    shell编程之循环语句与函数 一.条件测试 二.循环语句 ① for循环语句结构(遍历) 示例1 示例2 ② while循环语句结构(迭代) 示例1 示例2 ③ until 循环语句结构 示例1 一 ...

  4. 如何快速更新长缓存的 HTTP 资源

    前言 HTTP 缓存时间一直让开发者头疼.时间太短,性能不够好:时间太长,更新不及时.当遇到严重问题需紧急修复时,尽管后端文件可快速替换,但前端文件仍从本地缓存加载,导致更新长时间无法生效. 对于这个 ...

  5. Java的标准日志

    虽然开源社区有很多优秀的日志框架,但我们学习标准的java日志框架是为了更好的理解其他框架啊(近期项目要用ELK) 看自己以前写的Log4J简直不忍直视啊啊啊啊,那时还感觉自我良好 1. 为什么要使用 ...

  6. 在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 ...

  7. Java程序员必学知识点

    JVM无论什么级别的Java从业者,JVM都是进阶时必须迈过的坎.不管是工作还是面试中,JVM都是必考题.如果不懂JVM的话,薪酬会非常吃亏(近70%的面试者挂在JVM上了) 详细介绍了JVM有关于线 ...

  8. Springboot+Mybatis+小程序

    思维导图: 项目效果图 一览界面: 新增界面:

  9. Python自动化测试面试题-经验篇

    目录 Python自动化测试面试题-经验篇 Python自动化测试面试题-用例设计篇 Python自动化测试面试题-Linux篇 Python自动化测试面试题-MySQL篇 Python自动化测试面试 ...

  10. Hadoop (8088)未授权访问

    cd /vulhub/hadoop/unauthorized-yarn 加速下载环境 sudo vim /etc/docker/daemon.json 添加 {"registry-mirro ...