实现微信小程序搜索框跳转的相关代码

　　小程序搜索框跳转可以让小程序搜索更加便捷，但是很多人不知道怎样开发和使用，所以接下来就跟着小编一起来看一看实现微信小程序搜索框跳转的相关代码。

　　首先来看一看小程序搜索框跳转的效果：

　　微信小程序搜索框跳转实现代码：

　　.wxml

　　搜索:{{search.searchValue}}

　　{{item.team_name}} {{item.team_intr}}

　　.js

　　Page({ data:{ search:{ searchValue : '', showClearBtn : false }, searchResult : [] }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 微信小程序页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }, //输入内容时 searchActiveChangeinput : function(e){ const val = e.detail.value; this.setData({ 'search.showClearBtn' : val != '' ? true : false, 'search.searchValue' : val }) }, //点击清除搜索内容 searchActiveChangeclear : function(e){ this.setData({ 'search.showClearBtn' : false, 'search.searchValue' : '' }) }, //点击聚集时 focusSearch : function(){ if(this.data.search.searchValue){ this.setData({ 'search.showClearBtn' : true }) } }, //搜索提交 searchSubmit : function(){ const val = this.data.search.searchValue; if(val){ const that = this, app = getApp(); wx.showToast({ title : '搜索中', icon : 'loading' }); wx.request({ url: app.globalData.API_URL + 'searchTeam', data: { keywords : val, user_id : app.globalData.myInfo.user_id }, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {}, // 设置请求的 header success: function(res){ // success let searchResult = res.data.data; const len = searchResult.length; for(let i = 0; i < len; i++){ searchResult[i]['team_avator'] = app.globalData.STATIC_SOURCE + searchResult[i]['team_avator']; } that.setData({ searchResult : searchResult, 'search.showClearBtn' : false, }) }, fail: function() { // fail }, complete: function() { // complete wx.hideToast(); } }) } }})

　　.json

　　{ "navigationBarTitleText": "搜索团队"}

　　.wxss

　　page{ background-color:#EFEFF4;}.person__top__wrapper{ width:100%; box-sizing:border-box; padding-left:28rpx; padding-right:28rpx; padding-top:24rpx; padding-bottom:24rpx; border-top:1rpx solid #e5e5e5; border-bottom:1rpx solid #e5e5e5; height:178rpx; margin-top:30rpx; background-color:#fff; position: relative;}.person__top__avatar{ border:1rpx solid #e5e5e5; width:130rpx; height:130rpx; overflow: hidden; box-sizing:content-box; float: left;}.person__top__avatar image{ width:130rpx; height:130rpx; border-radius:7rpx;}.person__top__userinfo{ right:0; overflow: hidden; position: absolute; left:182rpx; box-sizing:border-box; top:44rpx; color:#000; font-family:'微软雅黑'; font-weight:500; bottom:44rpx;}.person__top__userinfo .h2{ width:300rpx; height:90rpx; line-height:90rpx; font-size:36rpx; }.person__top__userinfo .h3{ width:300rpx; height:60rpx; font-size:30rpx; }.person__top__userinfo .h4{ width:300rpx; height:30rpx; font-size:24rpx; }.person__top__userinfo::after { content: " "; display: inline-block; height: 17rpx; width: 17rpx; border-width: 2rpx 2rpx 0 0; border-color: #C6C6CB; border-style: solid; -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); position: absolute; top: 50%; margin-top: -10rpx; right: 30rpx;}.person__top__userinfo image{ display: inline-block; height: 34rpx; width: 34rpx; top: 50%; margin-top: -17rpx; position: absolute; right: 58rpx;}button::after{ border:none;}.person__top__wrapper{ margin-top:0; border-top:none;}

　　如何实现微信小程序搜索框跳转，小编在上文中给出了详细的代码，希望大家通过这些代码都能够开发成功，如果还想获取更多实用的教程及小程序代码，请关注微信小程序商店。

　　微信小程序外部链接跳转怎么弄

　　自定义菜单跳转小程序怎么弄

　　微信小程序点击跳转功能介绍