微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)

2023-07-29 12:19:04 523

一:搜索框功能实现

1.在首页做一个搜索框的样式并实现跳转到搜索页面

搜索

.search{ width:80%; } .search_arr{ border:1pxsolid#d0d0d0; border-radius:10rpx; margin-left:20rpx; } .search_arrinput{ margin-left:60rpx; height:60rpx; border-radius:5px; } .bc_text{ line-height:68rpx; height:68rpx; margin-top:34rpx; } .sousuo{ margin-left:15rpx; width:15%; line-height:150%; text-align:center; border:1pxsolid#d0d0d0; border-radius:10rpx; } .page_row{ display:flex; flex-direction:row } .searchcion{ margin:10rpx10rpx10rpx10rpx; position:absolute; left:25rpx; z-index:2; width:20px; height:20px; text-align:center; }

js.点击跳转到搜索的页面

suo:function(e){ wx.navigateTo({ url:'../search/search', }) },

2.搜索页面实现搜索功能

媒婆单身很抱歉,没有找到您要搜索的资料/(ㄒoㄒ)/~~

varapp=getApp(); varsearchValue='' //pages/search/search.js Page({ data:{ centent_Show:true, searchValue:'', img:'', nanshen_card:'' }, onLoad:function(){ }, searchValueInput:function(e){ varvalue=e.detail.value; this.setData({ searchValue:value, }); if(!value&&this.data.productData.length==0){ this.setData({ centent_Show:false, }); } }, suo:function(e){ varid=e.currentTarget.dataset.id varprogram_id=app.program_id; varthat=this; wx.request({ url:'aaa.php',//这里填写后台给你的搜索接口 method:'post', data:{str:that.data.searchValue,program_id:program_id,style:id}, header:{ 'content-type':'application/x-www-form-urlencoded' }, success:function(res){ if(res.data.length==0){ that.setData({ centent_Show:false, }); } that.setData({ nanshen_card:res.data, }); }, fail:function(e){ wx.showToast({ title:'网络异常！', duration:2000 }); }, }); } });

/*pages/search/search.wxss*/ @import"../index/card/card"; .searchcion{ width:24px; height:24px; text-align:center; margin-top:5rpx } .search{ padding:1%3%; background:#D0D0D0; } .searchinput{ width:85%; border-radius:5px; background:#fff; border:none; font-size:12px; padding:1%2.5%; margin-right:5px; } .searchbutton{ line-height:30px; text-align:center; border:none; font-size:28rpx; background:white }

php实现代码

总结

到此这篇关于微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)的文章就介绍到这了,更多相关微信小程序搜索内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)

一:搜索框功能实现

1.在首页做一个搜索框的样式并实现跳转到搜索页面

2.搜索页面实现搜索功能

热门推荐

随机推荐