【uni-app】实现搜索框、历史记录等详细操作

Uni-app实现搜索框、历史记录传值、点击历史记录跳转页面等操作

input输入框:官网教程

v-model 参数:是一个用于实现双向数据绑定的指令。它允许将表单元素的值与Vue实例的数据对象属性进行关联，从而实现数据的同步更新。

使用v-model指令绑定表单元素的值。例如代码这里的<input type="text" value="" placeholder="搜索" v-model="keyword" @confirm="searchAction" />，这里将input元素的值绑定到了实例的keyword属性上。

网页代码

<template>
	<view>
		<view class="form">
			<view class="form-input">
                <!-- 可代替使用uniapp扩展组件的uni-icons 具体在https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html
				-->
				<image src="../../static/images/icon-search.png" mode="widthFix"></image>
				<input type="text" value="" placeholder="搜索" v-model="keyword" @confirm="searchAction" />
			</view>
			<view class="cancel" @click="navigateBack">取消</view>
		</view>
        <view class="history">
			<view class="history-head">
				<text>搜索历史</text>
				<image src="../../static/images/icon-trash.png" mode="widthFix" @click="cleanHistory"></image>
			</view>
			<view class="history-list">
				<scroll-view v-for="item in historyList" @click="navigateToDetail(item)">
					{
  
  { item }}
				</scroll-view>
			</view>
		</view>
	</view>
</template>

style样式(自由发挥)

一定要加lang=“scss”，这样才可以完成嵌套样式操作

<style lang="scss" scoped>
	.form {
   
   
		background: white;
		display: flex;
		align-items: center;
		padding: 30rpx;

		.cancel {
   
   
			color: #666;
			margin-left: 20rpx;
			font-size: 28rpx;
		}
	}

	.form-input {
   
   
		display: flex;
		align-items: center;
		flex: 1;
		background-color: #f5f5f5;
		border-radius: 80rpx;
		padding: 0 10rpx;

		image {
   
   
			display: block;
			width: 36rpx;
			margin: 0 20rpx;
			flex-shrink: 0;
		}

		input {
   
   
			display: block;
			flex: 1;
			font-size: 28rpx;
			color: black;
			height: 70rpx;
			line-height: 70rpx;
		}
	}

	.history {
   
   
		background: white;
		padding: