Wie implementiert Uniapp die Funktion zum Hinzufügen von Eingabeaufforderungen?

Die Implementierungsmethode zum Hinzufügen von Eingabeaufforderungen: Bestimmen Sie zuerst die Eingabe und rufen Sie dann die Daten über die Schnittstelle ab, und legen Sie dann das Änderungsereignis des Eingabefelds fest und implementieren Sie den Suchklick.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Uni-App-Version 2.5.1. Diese Methode ist für alle Computermarken geeignet.

Empfohlen (kostenlos): Uni-App-Entwicklungs-Tutorial

uniapp implementiert eine Such- und Eingabeaufforderungsfunktion (einschließlich Übergabe von Parametern usw.)

Schauen Sie sich zuerst den Code an, kopieren Sie ihn und Verwenden Sie es. Wir haben Ihnen dabei geholfen, die Verwendung von V-for-Schleifen oder andere mögliche Probleme in Betracht zu ziehen. (Es wird empfohlen, das Plug-In zu installieren und scss zu verwenden.) Sie werden den folgenden Effekt sehen.

<template>
	<view>
		<input>
		<!-- 判断input获取焦点同时后台给到了数据 -->
		<view>
			<view>
				{{item.title}}
			</view>
		</view>
	</view></template><script>
	export default {
		data() {
			return {
				Value: &#39;&#39;, //搜索内容
				placeholder: &#39;请输入搜索内容&#39;, //提示
				isValue: false, //文字框是否显示
				SearchList: []
			}
		},
		methods: {
			ShowValue() {
				this.isValue = !this.isValue				if (this.isValue) { //如果获取到了焦点
					this.getList()
				} else {
					//失去焦点  清空数据
				}
			},
			getList(value) { //这一步是获取数据   您可以通过接口获取  这里做前端模拟处理
				// 需要和后台协商没有数据时候传递默认的几条
				// axios.get(&#39;/getList?value=&#39;+value).then(res=>{  //请求案例
				// 	this.SearchList = res.data.data
				// })
				if (!value) {
					let arr = [{
							id: 1,
							title: "我是搜索信息1"
						},
						{
							id: 2,
							title: "我是搜索信息2"
						},
						{
							id: 3,
							title: "我是搜索信息3"
						},
						{
							id: 4,
							title: "我是搜索信息4"
						},
						{
							id: 5,
							title: "我是搜索信息5"
						},
					]
					this.SearchList = arr				} else {
					this.getList()
				}
			},
			GetValue(event) { //input框的change事件
				console.log(&#39;当前输入&#39; + event.detail.value)
				// 有值就获取 没有就让他为空 
				event.detail.value ? this.Value = event.detail.value : this.Value = &#39;&#39;
				event.detail.value ? this.getList(this.Value) : this.getList(this.Value)
			},
			SetValue(value) { //点击事件 搜索点击这一条
				console.log(&#39;搜索信息为&#39; + value)
				this.Value = value				this.placeholder = value				this.SearchList = []
				this.isValue = !this.isValue				// 拿到数据  做页面跳转操作比如
				// uni.navigateTo({
				// 	url:"../cart/cart"
				// })
			}
		},
		onLoad() {}
	}</script><style>
	$max:100%;
	.box {
		width: $max;
		padding: 10 30rpx; //上下10 左右30  
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 32px;
		position: relative;
		background: #409EFF;
		.S-input {
			width: 660rpx;
			background: #f7f7f7;
			padding-left: 30rpx;
			border-radius:32rpx;
		}

		.InputList {
			position: absolute;
			width: 690rpx;
			height: auto;
			min-height: 100rpx;
			top: 74rpx;
			border: 1rpx solid #409EFF;
			border-radius: 5rpx;
			padding: 10rpx;
			.listSon {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 32rpx;
				text-indent:1em;
			}
			.listSon:nth-of-type(even){
				background: #f7f7f7;
			}
		}
	}</style>

Zusätzliche und möglicherweise nützliche Informationen wurden als Kommentare hinzugefügt

Wenn Sie weitere Fragen zu uniapp haben oder diese Methode nicht verstehen, können Sie eine Nachricht hinterlassen und ich werde so schnell wie möglich antworten und helfen Ihnen, es zu lösen.

Das obige ist der detaillierte Inhalt vonWie implementiert Uniapp die Funktion zum Hinzufügen von Eingabeaufforderungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!