1.专题页加搜索
我们需要找到小程序页面路径 pages/topic/topic
打开topic.wxml加入以下代码
<form catchsubmit="formSubmit" catchreset="formReset" id="search-form">
<view class="search-pancel">
<input value="" id="search-input" name="input" confirm-type="search" class="search-input" placeholder="搜索你感兴趣的内容..." bindconfirm="formSubmit"></input>
<button class="search-button" form-type="submit" size="mini" plain="true">
<icon type="search" color="#959595" size="12" />
</button>
</view>
</form>
接着打开topic.wxss加入
.search-button {
border-left:0!important;
border-top:1pxsolid#fff!important;
border-right:1pxsolid#fff!important;
border-bottom:1pxsolid#fff!important;
background-color:#fff!important;
border-bottom-left-radius:0;
border-top-left-radius:0;
border-top-right-radius:60px;
border-bottom-right-radius:60px;
color:#296fd0!important;
width:20%;
margin:0!important;
}
.search-button icon {
position:absolute;
margin:28rpx16rpx;
}
.search-input {
background-color:#fff;
padding:16rpx016rpx32rpx;
min-height:1rem;
font-size:30rpx;
border-bottom-left-radius:60px;
border-top-left-radius:60px;
border-top-right-radius:0;
border-bottom-right-radius:0;
border-right:0!important;
height:48rpx;
width:80%;
text-align:left;
}
.share-button {
border:1pxsolid#eee!important;
color:#118fff!important;
left:10rpx;
height:100rpx;
width:200rpx;
}
.search-pancel {
display:flex;
flex-direction:row;
background-color:#118fff;
padding:24rpx;
}
.search-pancel image {
width:50rpx;
height:50rpx;
margin-left:20rpx;
vertical-align:middle;
}
暂无评论
要发表评论，您必须先 登录