守望轩WordPress小程序修改——专题页加搜索框

2019年1月22日20:04:02 发表评论

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;
}
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
墨墨

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: