组件component下
wmxl
<!-- components/search/search.wxml -->
<view class="search_container">
<view class="search_header">
<image src="search.png" class="search_icon"></image>
<input class="search_word" placeholder="搜索" placeholder-style='font-size:26rpx;line-height:26rpx;' bindinput="search" maxlength="15" bindconfirm="certain"></input>
</view>
</view>
js
// components/search/search.js
Component({
/**
* 组件的属性列表
*/
properties: {
datas: String
},
/**
* 组件的初始数据
*/
data: {
search_value: ''
},
/**
* 组件的方法列表
*/
methods: {
search(e) {
this.search_value = e.detail.value
},
certain(e) {
let send_value = this.search_value
this.triggerEvent('sendvalue', { send_value }, {
})
}
}
})
wxss
.search_container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 88rpx;
background: rgba(240, 240, 240, 1);
}
.search_header {
display: flex;
justify-content: flex-start;
align-items: center;
width: 690rpx;
height: 60rpx;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(229, 229, 229, 1);
border-radius: 30px;
}
.search_word {
margin-top: 5rpx;
width: 600rpx;
height: 26rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: rgba(117, 117, 117, 1);
}
.search_icon {
margin-left: 20rpx;
margin-right: 10rpx;
width: 33rpx;
height: 33rpx;
}
搜索图标自己添加到组件里
食用方法
在需要页面的json导入
{
"usingComponents": {
"v-search": "../../components/search/search",
}
}
页面的wxml
<v-search bind:sendvalue="search_value"></v-search>
js里拿到组件值
search_value(e){
var name = e.detail.send_value;
}