您现在的位置是：网站首页> 编程资料编程资料

微信小程序实现简单搜索框_javascript技巧_

2023-05-24 345人已围观

简介微信小程序实现简单搜索框_javascript技巧_

本文实例为大家分享了微信小程序实现简单搜索框的具体代码，供大家参考，具体内容如下

app.json

{   "pages":[     "pages/index/index"   ],   "window":{     "backgroundTextStyle":"light",     "navigationBarBackgroundColor": "#16C4AF",     "navigationBarTitleText": "Weixin",     "navigationBarTextStyle":"white"   },   "style": "v2",   "sitemapLocation": "sitemap.json" }

index.wxml

index.wxss

/**index.wxss**/ .search-container{   display: flex;   justify-content: space-between;   align-items: center;   padding: 10rpx 20rpx;   box-sizing: border-box;   background-color: #ddd; } .search-left{   background-color: #eee;   flex: 2; } .search-left image{   width: 48rpx;   height: 48rpx;   padding: 10rpx 20rpx 10rpx 10rpx;   vertical-align: middle;    } .search-left input{   display: inline-block;   vertical-align: middle;   width: calc(100% - 88rpx); } .search-right{   padding-left: 20rpx; } .search-right image{   width: 80rpx;   height: 80rpx;   vertical-align: middle; }

改动下.search-left、.search-left image的样式，修改后的内容如下：

/**index.wxss**/ .search-container{   display: flex;   justify-content: space-between;   align-items: center;   padding: 10rpx 20rpx;   box-sizing: border-box;   background-color: #ddd; } .search-left{   background-color: #eee;   flex: 2;   border-radius: 40rpx;   padding-right: 40rpx;   box-sizing: border-box; } .search-left image{   width: 48rpx;   height: 48rpx;   padding: 10rpx 20rpx;   vertical-align: middle;    } .search-left input{   display: inline-block;   vertical-align: middle;   width: calc(100% - 88rpx); } .search-right{   padding-left: 20rpx; } .search-right image{   width: 80rpx;   height: 80rpx;   vertical-align: middle; }

效果图如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：ahooks useVirtualList 封装虚拟滚动列表_React_

下一篇：JS 中在严格模式下 this 的指向问题_javascript技巧_

您现在的位置是：网站首页> 编程资料编程资料

微信小程序实现简单搜索框_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢