開發(fā)小程序的過程，是一個(gè)學(xué)習(xí)知識(shí)磅废，解決問題的過程，每當(dāng)實(shí)現(xiàn)了一個(gè)需求荆烈，總會(huì)有很大的成就感拯勉，每天記錄一個(gè)開發(fā)過程中的細(xì)節(jié)。
實(shí)現(xiàn)效果如下：
圖片.png
官方參考鏈接：https://developers.weixin.qq.com/miniprogram/dev/component/input.html
wxml:
<view class='page_row' bindtap="suo">
<view class="search">
<view class="df search_arr">
<icon class="searchcion" size='20' type='search'></icon>
<input class="" disabled placeholder="請(qǐng)輸入關(guān)鍵字" value="{{searchValue}}"/>
</view>
</view>
<view class='sousuo'>搜索</view>
</view>
wxss:
.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;
}
js:
//input.js
Page({
data: {
focus: false,
inputValue: ''
},
bindButtonTap: function () {
this.setData({
focus: true
})
},
})
原文作者：祈澈姑娘:技術(shù)博客：http://www.reibang.com/u/05f416aefbe1
90后前端妹子耙考，愛編程谜喊，愛運(yùn)營(yíng)，愛折騰倦始。 堅(jiān)持總結(jié)工作中遇到的技術(shù)問題斗遏，堅(jiān)持記錄工作中所所思所見，歡迎大家一起探討交流鞋邑。
