微信小程序+vue+taro：搜索框

需求：获取输入框的值

完整代码

<template><view><view class="join"><view class="body"><view class="apply">申请加入商家</view><view class="search"><icon class="search-icon" type="search" size="14"></icon><inputtype="text"v-model="serchVal"placeholder="请输入商家名称"@input="searchValueInput"/></view><view v-if="show"><view class="list" v-for="(item, index) in merchant" :key="index"><view class="name" @tap="succVal(item)">{{ item.company }}</view></view></view><view class="button"><button @tap="apply">提交申请</button></view></view></view></view>
</template><script>
import Taro from "@tarojs/taro";
import "./join.scss";
import api from "../../config/api.js";export default {data() {return {serchVal: "",merchant: [],show: true};},methods: {searchValueInput() {let serchVal = this.serchVal.replace(/\s*/g, "");console.log(serchVal);let params = {name: serchVal,};api.getMerchantName(params).then((res) => {console.log(res);if (res.code == 200) {this.merchant = res.data;}});},succVal(item) {this.serchVal = item.company;this.show=false},apply(){console.log(this.serchVal);}},
};
</script>

微信小程序+vue+taro：搜索框相关推荐

微信小程序开发(3)——搜索框一键清除
小程序的input输入可以获取到实时输入数据,一键删除功能需要借助input的value属性 1.搜索框的数据获取要在<input>标签中设置bindinput='search'属性 & ...
微信小程序 - 商城项目 - 搜索框组件
搜索框组件引入自定义的搜索框组件引入扩展组件需要对搜索框组件实现一个粘性布局功能,引入官方的扩展组件 npm 安装扩展组件引入扩展组件构建 npm 实现粘性布局(在iphone5上可以实现, ...
微信小程序头部自定义搜索框斗鱼等
效果图代码 app.js App({onLaunch: function (res) {// 自定义标题栏测试const that = this;// 获取系统信息const systemInfo ...
微信小程序最全搜索功能
微信小程序最全搜索功能主要功能: 搜索点击x号清空输入框内容点击取消返回上一页面搜索数据为空提示历史记录清空历史记录点击历史记录搜索点击搜索列表带参数返回上一页面代码如下: < ...
微信小程序—模拟豆瓣搜索电影（图文）
微信小程序-模拟豆瓣搜索电影先新建search目录和page 1.在search.wxml页面给input添加bindinput事件给input写一个value值,用来清空给button绑定b ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
微信小程序之底部弹框预约插件
代码地址如下: http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq. ...
第7课微信小程序实现图片搜索器案例：
第7课微信小程序实现图片搜索器案例: 效果图如下: 手机运行效果: 来我们来看看代码的全局样式: 首先在app.json内的pages把需要的index1.index2页面注册之后我们只需写ind ...
零基础也能学会的微信小程序制作动态搜索页
零基础也能学会的微信小程序制作动态搜索页准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 最终效果: 动手做起来吧~ index.wxml <vi ...

微信小程序+vue+taro：搜索框

微信小程序+vue+taro：搜索框相关推荐

最新文章

热门文章