uniapp은 프롬프트 추가 기능을 어떻게 구현합니까?

uniapp에 프롬프트를 추가하는 구현 방법: 먼저 입력을 결정하고 포커스를 얻은 다음 인터페이스를 통해 데이터를 얻고 프런트 엔드 시뮬레이션 처리를 수행한 다음 마지막으로 클릭 이벤트를 설정합니다. 검색 클릭을 구현합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, uni-app 버전 2.5.1 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천(무료): uni-app 개발 튜토리얼

uniapp은 검색 및 프롬프트 기능을 구현합니다(매개변수 전달 등 포함)

먼저 코드를 보고 복사한 후 그것을 사용하세요. v-for 루프 사용이나 기타 가능한 문제를 고려하는 데 도움을 드렸습니다. (플러그인을 설치하고 scss를 사용하는 것을 권장합니다.) 다음과 같은 효과를 볼 수 있습니다.

<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>

추가로 유용한 정보는 댓글로 추가했습니다

유니앱에 대해 더 궁금한 점이 있거나 이 방법이 이해가 안 되시는 경우 메시지를 남겨주시면 최대한 빨리 답변해 드리겠습니다. 그리고 당신이 그것을 해결하도록 도와주세요.

위 내용은 uniapp은 프롬프트 추가 기능을 어떻게 구현합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!