uniapp 如何给搜索框设值_unifromimput搜索框怎么可以实现搜索

展开全部

"pages": [

{

"path": "pages/index/index",

"style": {

"navigationBarBackgroundColor": "#00c170",

"app-plus": {

"bounce": "none",

"titleNView": {

"buttons": [

{

"text": "地图",

"fontSize":"16",

"float": "right",

"color":"#fff"

},

{

"text": "唐山",

"fontSize":"16",

"float": "left",

"color":"#fff"

}

],

"searchInput":{

"align": "center",

"placeholder": "请输入32313133353236313431303231363533e78988e69d8331333431366239查找房源信息",

"borderRadius":"50upx",

"backgroundColor": "#fff"

}

}

}

}

}

]

你可能会问，我的点击事件和输入框事件如何监听？

uni-app给出了相应的api,onNavigationBarButtonTap和onNavigationBarSearchInputChanged，写在响应的页面中即可：

export default {

onNavigationBarButtonTap() {

console.log("你点击了按钮")

},

onNavigationBarSearchInputChanged () {

console.log("你输入了信息")

}

}

但是按钮有两个，只有一个按钮事件怎么办？还有输入框的文字如何获取？其实这两个函数接收一个值，就是相对应的信息：

export default {

onNavigationBarButtonTap(val) {

console.log(val)

},

onNavigationBarSearchInputChanged (val) {

console.log(val)

}

}

page.json里每个页面的导航栏是默认开启的，有一个navigationStyle属性，默认值是default，我们把它改成custom就能把他去掉了：

{

"path": "pages/index/index",

"style": {

"navigationStyle":"custom"

}

但是 移动端导航依然在，这就需要我们使用 titleNView这个属性了，它是用来专门设置导航栏的，具体如下：

{

"path" : "pages/secondPage/secondPage",

"style" : {

"navigationStyle": "custom",

"app-plus": {

"titleNView": false

}

}

}

下面是全部的源码：

{{leftWords}}

placeholder="请输入搜索"

v-model="value"

@change="inputChange"/>

v-if="rightWords||rightIcon"

@click="rightClick">

{{rightWords}}

export default {

name: "IndexHeader",

props: [

'leftWords',

'input',

'rightIcon',

'rightWords'

],

data () {

return {

value: ''

}

},

methods: {

inputChange: function () {

this.$emit('change',this.value)

},

rightClick: function () {

this.$emit("rightClick")

}

}

}

$color-base: #00c16f;

$words-color-base: #333333;

$words-color-light: #999999;

.header-wrap {

width: 100%;

position: fixed;

top: 0;

z-index: 999;

.index-header {

height: 88upx;

line-height: 88upx;

padding: 0 30upx;

padding-top: 40upx;

background-color: $color-base;

font-size: 28upx;

color: #fff;

display: flex;

align-items: center;

justify-content: space-between;

.address {

font-size: 26upx;

}

.input-wrap {

width: 500upx;

height: 70upx;

padding: 10upx 30upx 10upx 100upx;

box-sizing: border-box;

background-color: #fff;

border-radius: 50upx;

color: $words-color-base;

position: relative;

text {

position: absolute;

left: 40upx;

top: -8upx;

color: $words-color-light;

font-size: 30upx;

}

}

.map-wrap {

.iconfont {

font-size: 32upx;

margin-right: 5upx;

}

text {

font-size: 26upx;

}

}

}

}

.blank {

height: 126upx;

}

已赞过

已踩过<

你对这个回答的评价是？

评论

收起