小程序中搜索功能的实现方法（代码）（小程序搜索框简单的实现）

小程序中搜索功能的实现方法（代码）（小程序搜索框简单的实现）

小程序中搜索功能是非常重要的，毕竟有了搜索功能会给该用户很大的方便，下面我们就来看看小程序中如何实现搜索功能。

1.页面

搜索 热门搜索 {{item}} 没有符合条件的选项 {{item.title}} -

2.css

@import '../common/lib/weui.wxss'; .weui-search-bar{ border-top:0px; background-color:white; border-bottom:0px; } .weui-search-bar__label{ background:#F0F0F0; } .weui-search-bar__form { border-radius:8px; width:686rpx; height: 2.9%; margin-bottom: 1.3%; } .weui-icon-search{ margin-left:7px; } .weui-search-bar__box{ width: 91.5%; height: 2.9%; } .page__hd{ width: 708rpx; height: 228rpx; margin-left: 2.3%; } .swiper-ad { height: 228rpx; width: 100%; } .swiper-image { height: 100%; width: 100%; } .title-hd{ font-family: PingFangSC-Semibold; font-size: 22px; color: #333333; letter-spacing: 0; text-align: center; line-height: 22px; width: 25.5%; height: 44rpx; margin-top: 32rpx; margin-left: 2.3%; margin-bottom: 32rpx; } .info-top{ background-color: white; position: relative; height:150rpx; border-bottom:1px solid #F0F0F0; width: 94.5%; margin-left: 2.3%; } .info-vip{ position: absolute; left:40rpx; } .info-bm{ position: absolute; left:224rpx; } .info-sc{ position: absolute; left:408rpx; } .info-zb{ position: absolute; left:592rpx; } .info-img{ margin-top: 30rpx; width: 76rpx; height:76rpx; } .info-right{ float:right; } .info-font{ font-family: PingFangSC-Regular; font-size: 14px; color: #666666; letter-spacing: 0; line-height: 14px; text-align: center; } .hd{ width: 94.5%; height: 598rpx; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15); border-radius: 8px; margin-left: 2.3%; margin-top: 32rpx; } .hd-zt{ height:600rpx; margin-bottom: 40rpx; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15); border-radius: 8px; } .hd-pic{ width: 100%; height:386rpx; } .hd-title{ font-family: PingFangSC-Regular; font-size: 16px; color: #333333; letter-spacing: 0; line-height: 16px; margin-top:24rpx; margin-left: 24rpx; } .hd-price{ font-family: PingFangSC-Regular; font-size: 14px; color: #999999; letter-spacing: 0; line-height: 14px; margin-top:48rpx; margin-left: 24rpx; } .searchbar-result{ margin-top: 0; font-size: 14px; } .searchbar-result:before{ display: none; } .weui-cell{ padding: 12px 15px 12px 35px; } .placeholder{ width:50%; margin: 5px; padding: 0 10px; text-align: center; background-color: #EBEBEB; height: 2.3em; line-height: 2.3em; color: #cfcfcf; } .weui-grid_border{ width:708.75rpx; height:560rpx; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15); border-radius: 8px; } .weui-grid__product{ display:block; width:708.75rpx; height:386rpx; margin:0 auto; padding-top:10px; margin-bottom: 10px; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15); border-bottom:0; border-radius: 8px; } .weui-grid_font{ background-color: white; height:78px; border-top:0; padding-top: 4rpx; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15); border-radius: 8px; } .product-price{ font-size:14px; color:#996B7A; padding-top:5px; text-align:center; } .weui-underline{ text-align:center; color:#F0C4D3; margin-top: -5px; } .category-item{ border:0px; background-color:white; width:25%; } .category-item{ border:0px; background-color:white; width:25%; } .category-pic{ display:block;width:50px;height:50px;margin:0 auto } .category-name { margin-top:6px;display:block;text-align:center;color:#82501e;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden; } .active-nav-border{ margin:20rpx auto 40rpx auto; width: 60rpx; height: 4rpx; background: rgb(240,196,211); } .page-version{ margin-top:20rpx; padding: 30rpx 50rpx 30rpx; text-align: center; color:#ccc; background-color: white; font-size:12px; } .scroll-view_H{ white-space: nowrap; } .scroll-view-item{ height: 200px; } .scroll-view-item_H{ display: inline-block; width: 320rpx; height: 180rpx; margin-left: 20rpx; } .sp{ width: 300rpx; height: 68rpx; font-size: 34px; color: #303030; letter-spacing: 0; line-height: 68rpx; margin-bottom: 40rpx; margin-left:32rpx; } .zj{ font-family: PingFangSC-Regular; font-size: 14px; color: #999999; letter-spacing: 0; line-height: 16px; margin:20px 0 40rpx 20px; position: relative; } .tags { font-size: 14px; color: #999999; letter-spacing: 0; line-height: 16px; display: inline-block; height: 18px; padding:8px; margin:10px; border-radius:5px; background:#f3f3f6; } .search-title { margin-left: 40rpx; color:#999999; } .search-list, { padding:0 20px; } .search-hint { padding: 0 20px; color:#999; font-size:14px; } .search-item { width:100%; margin:5px 0; background:#eee; padding:5px; border-radius:5px; height: 18px; line-height: 18px; font-size:14px; } .search-btn { position: absolute; z-index: 11; top: -20rpx; right: -42rpx; height: 54rpx; width: 120rpx; text-align: center; line-height: 76rpx; font-size: 28rpx; border-bottom-left-radius: 0; border-top-left-radius: 0; background-color: #eee; } .search-btn::after{ border-bottom-left-radius: 0; border-top-left-radius: 0; border:0; }-

3.js

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。