青虹堂影刃先锋-武侠网游主题活动门户

开发小程序的过程，是一个学习知识，解决问题的过程，每当实现了一个需求，总会有很大的成就感，每天记录一个开发过程中的细节。

实现效果如下：

图片.png

官方参考链接：https://developers.weixin.qq.com/miniprogram/dev/component/input.html

wxml:

代码语言：javascript复制

搜索

wxss:

代码语言：javascript复制 .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;

} 原文作者：祈澈姑娘

技术博客：https://www.jianshu.com/u/05f416aefbe1