这篇文章主要介绍了微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能),需要的朋友可以参考下
上效果图:
一:搜索框功能实现
1.在首页做一个搜索框的样式并实现跳转到搜索页面
搜索
.search{ width: 80%; } .search_arr { border: 1px solid #d0d0d0; border-radius: 10rpx; margin-left: 20rpx; } .search_arr input{ 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: 1px solid #d0d0d0; border-radius: 10rpx; } .page_row{ display: flex; flex-direction: row } .searchcion { margin: 10rpx 10rpx 10rpx 10rpx; 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ㄒ)/~~
var app = getApp(); var searchValue ='' // pages/search/search.js Page({ data: { centent_Show: true, searchValue: '', img: '', nanshen_card:'' }, onLoad: function () { }, searchValueInput: function (e) { var value = e.detail.value; this.setData({ searchValue: value, }); if (!value && this.data.productData.length == 0) { this.setData({ centent_Show: false, }); } }, suo:function(e){ var id= e.currentTarget.dataset.id var program_id = app.program_id; var that = 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; } .search input{ width: 85%; border-radius: 5px; background: #fff; border: none; font-size: 12px; padding:1% 2.5%; margin-right: 5px; } .search button{ line-height:30px; text-align: center; border: none; font-size: 28rpx; background: white }php实现代码
总结
以上就是微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)的详细内容，更多请关注0133技术站其它相关文章！
