uni-app实现的搜索功能 可以应用到vue 小程序

把搜索的输入框写成了一个组件

父组件直接引用即可

废话不说上代码  搜索框组件

 search.vue 

<template>
	<view class="search" :style="{ backgroundColor: backgroundColor }">
		<view class="content" :style="{ 'border-radius': radius + 'px', border: border }">
			<view class="content-box" :class="{ center: mode === 2 }">
				<text class="icon icon-search">&#xe61c;</text>
				<input class="input" :class="{ center: !active && mode === 2 }" :focus="isFocus" :placeholder="placeholder" v-model="inputVal" @focus="focus" @blur="blur" />
				<!-- <view v-if="!active && mode === 2" class="input sub" @click="getFocus">请输入搜索内容</view> -->
				<text v-if="isDelShow" class="icon icon-del" @click="clear">&#xe644;</text>
			</view>
			<view v-show="(active && show && button === 'inside') || (isDelShow && button === 'inside')" class="searchBtn" @click="search">搜索</view>
		</view>
		<view v-if="button === 'outside'" class="button" :class="{ active: show || active }" @click="search">
			<view class="button-item">{{ !show ? searchName : '搜索' }}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		mode: {
			type: Number,
			default: 1
		},
		button: {
			type: String,
			default: 'outside'
		},
		show: {
			type: Boolean,
			default: true
		},
		radius: {
			type: String,
			default: '60'
		},
		placeholder: {
			type: String,
			default: '请输入搜索内容'
		},
		backgroundColor: {
			type: String,
			default: '#fff'
		},
		border: { type: String, default: '1px #f5f5f5 solid' }
		
	},
	data() {
		return {
			active: false,
			inputVal: '',
			searchName: '取消',
			isDelShow: false,
			isFocus: false
		};
	},
	methods: {
		focus() {
			this.active = true;
		},
		blur() {
			this.isFocus = false;
			if (!this.inputVal) {
				this.active = false;
			}
		},
		clear() {
			this.inputVal = '';
			this.active = false;
			this.$emit('search', '');
		},
		getFocus() {
			this.isFocus = true;
		},
		search() {
			if (!this.inputVal) return;
			console.log(this.inputVal);
			this.$emit('search', this.inputVal);
		}
	},
	watch: {
		inputVal(newVal) {
			if (newVal) {
				this.searchName = '搜索';
				this.isDelShow = true;
			} else {
				this.searchName = '取消';
				this.isDelShow = false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.search {
	display: flex;
	width: 100%;
	border-bottom: 1px #f5f5f5 solid;
	box-sizing: border-box;
	padding: 15upx;
	font-size: $uni-font-size-base;
	background: #fff;
	.content {
		display: flex;
		align-items: center;
		width: 100%;
		height: 60upx;
		border: 1px #ccc solid;
		background: #fff;
		overflow: hidden;
		transition: all 0.2s linear;
		border-radius: 30px;

		.content-box {
			width: 100%;
			display: flex;
			align-items: center;
			background-color:#F4F4F4;
			&.center {
				justify-content: center;
			}
			.icon {
				padding: 0 15upx;
				
				&.icon-del {
					font-size: 38upx;
					
				}
			}
			.input {
				width: 100%;
				max-width: 100%;
				line-height: 60upx;
				height: 60upx;
				color:#333;
				font-size:28upx;
				// transition: all 0.2s linear;
				&.center {
					width: 200upx;
				}
				&.sub {
					// position: absolute;
					width: auto;
					color: grey;
				}
			}
		}
		.searchBtn {
			height: 100%;
			flex-shrink: 0;
			padding: 0 30upx;
			background: $uni-color-success;
			line-height: 60upx;
			color: #fff;
			border-left: 1px #ccc solid;
			transition: all 0.3s;
		}
	}

	.button {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		flex-shrink: 0;
		width: 0;
		transition: all 0.2s linear;
		white-space: nowrap;
		overflow: hidden;
		&.active {
			padding-left: 15upx;
			width: 100upx;
			color: #8BC34A;
		}
	}
}
@font-face {
	font-family: 'iconfont';
	src: url('https://at.alicdn.com/t/font_989023_efq0mtli526.ttf') format('truetype');
}
.icon {
	font-family: iconfont;
	font-size: 32upx;
	font-style: normal;
	color: #999;
}
</style>

 

引用 搜索框

Quotesearch.vue

<template>
	<view>
      =============================
    使用
		<mSearch :show="false" @search="search($event, 1)"></mSearch>
      ==================================
下面是我写的一些别的 可以不用看

		<view class="hot-search-wrap" v-if="isShowHotKey">
			<view class="hot-search"><text class="shugang"></text> <text class="textinfo">热门搜索</text> </view>
			<view class="hot-key-wrap">
				<view class="hot-key" v-for="(item, index) in mhotKey" :key="index" @tap="search(item, '')">{{ item }}</view>
			</view>
		</view>
		<view class="wrapper" v-if="jobList">
			<view class="job-list-wrap">
				<view class="job-list" v-for="(item, index) in jobList" :key="item.id" @tap="goDetailPage(item.id)">
					<view class="icon"><image :src="item.thumbimg" mode=""></image></view>
					<view class="job-con-wrap">
						<view class="job-title">
						{{ item.product_name }} 
						<image class="hot" :src="item.tag_logo" mode=""></image>
						</view>
						<view class="job-tip">{{ item.settlement }} | {{ item.recruitment }} | {{ item.sex }}</view>
					</view>
					<view class="job-rich">
						<text class="job-salary">{{ item.remuneration }}</text>
						<text class="job-cen">{{ item.remuneration_type }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
//引入进来

import mSearch from '@/components/mehaotian-search/search.vue';
api 是封装了请求数据 不用看
import { api } from '@/common/api.js';
export default {

// 注册子组件
	components: {
		mSearch
	},

	data() {
		return {
			keyword: '',
			jobList: '',
			mhotKey: ['服务员', '客服', '销售', '在线直播','提成','校园代理','家教','餐饮','促销','派单','日结','分拣打包'],
			isShowHotKey: true
		};
	},
	methods: {
		search(e, val) {
			// console.log(e, val);
			// this['val'+val] = e;
			if (e == '') {
				uni.showToast({
					title: '请输入关键词',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			this.getJoblist(1, 20, e).then(rs => {
				let [err, res] = rs;
				let { code, data } = res.data;
				if (code == 1001) {
					this.jobList = data;
					this.isShowHotKey = false;
				} else {
					uni.showToast({
						title: '换一个关键词试试吧',
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		goDetailPage(key) {
			uni.navigateTo({
				url: '/pages/select/detail?id=' + key
			});
		},
		getJoblist(_page = 1, _limit = 10, _keyword) {
接口换成自己的
			return api.post('https://job.liaotaba.com/api/product/dataList', {
				page: _page,
				limit: _limit,
				product_type: this.pid,
				keyword: _keyword,
				token: uni.getStorageSync('token') ? uni.getStorageSync('token') : '',
				uid: uni.getStorageSync('uid') ? uni.getStorageSync('uid') : '',
				type: '',
				is_selected: '',
				is_hot: '',
				is_tuijian: ''
			});
		}
	}
};
</script>
<style lang="scss">
.hot-search-wrap {
	padding: 20upx;
	.hot-search {
			font-size: 32upx;
			font-weight: 500;
			color: #333;
			padding:10upx;
			overflow: hidden;
			position:relative;
			.shugang{
				display: inline-block;
				width: 6upx;
				height: 30upx;
				background-color: #89C756;
				position: absolute;
				top: 18upx;
				left: 30upx;
			}
			.textinfo{
				display: inline-block;
				width: 200upx;
				height: 34upx;
				margin-left: 40upx;
				color: #333333;
				font-weight: 600;
				
				
			}
	}
	.hot-key-wrap {
		overflow: hidden;
		margin-top: 20upx;
		.hot-key {
			float: left;
			margin-right: 20upx;
			padding: 14upx 40upx;
			margin-bottom: 30upx;
			background: #f4f4f4;
			font-size: 28upx;
			border-radius: 10upx;
			color: #898989;
			font-weight: 600;
		}
	}
}
.wrapper {
	padding: 10upx 30upx 0;
}
.job-list-wrap {
	overflow: hidden;
	.job-list {
		overflow: hidden;
		border-bottom: 2upx solid #d7d7d7;
		padding: 30upx 0 32upx;
		.icon {
			float: left;
			width: 56upx;
			height: 56upx;
			image {
				width: 56upx;
				height: 56upx;
			}
		}
		.job-con-wrap {
			float: left;
			margin-left: 19upx;
			width: 424upx;
			font-size: 30upx;
			.job-title {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				color: #333333;
				font-size: 35upx;
				font-weight: 600;
				.hot {
					width: 60upx;
					height: 30upx;
					margin-left: 20upx;
				}
			}
			.job-tip {
				margin-top: 22upx;
				font-size: 24upx;
				color: #868686;
				clear: both;
			}
		}
		.job-rich {
			float: left;
			width: 190upx;
			text-align: right;
			font-size: 36upx;
			font-weight:600;
			color:rgba(229,28,35,1);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			margin-top: 30upx;
			.job-salary {
				font-size:36upx;
				font-family:PingFangSC;
				font-weight:600;
				color:rgba(229,28,35,1);
				text-align: right;
			}
			.job-cen{
				font-size:28upx;
				font-family:PingFangSC;
				font-weight:400;
				color:rgba(229,28,35,1);
				text-align: right;
			}
		}
	}
}
</style>

 

   初始化显示                               

  输入显示 

 

好了完了

  • 3
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 对于将uni-app小程序转换为Vue H5项目,我们需要考虑以下几个方面来实现: 1. 了解uni-appVue H5项目的区别和相似之处。虽然两者都是基于Vue框架开发的,但uni-app是跨多个平台的项目,而Vue H5项目只面向网页端,因此需要根据具体需求来进行修改和适配。 2. 理解uni-app小程序Vue H5项目的架构和设计模式。首先,需要对uni-app小程序Vue H5项目的各种组件、路由、状态管理、API使用等有比较深入的理解;其次,需要熟悉uni-appVue H5项目的开发规范和常见问题及解决方法。 3. 针对特定项目需求对uni-app小程序进行改造和重构,使其能够适应Vue H5项目的要求。需要注意的是,不同平台的UI适配、页面跳转、数据处理方式等会有所不同,需要进行相应的调整。 4. 组件的适配和重构:需要根据Vue H5项目的实际需求,对uni-app小程序中的组件进行适配和重构,以满足开发需求。 总而言之,将uni-app小程序转换为Vue H5项目需要有深入的前端开发经验和技能。需要具备良好的编程习惯、代码规范和团队合作能力,同时还需要对Vueuni-app生态系统有较深入的理解,这样才能确保项目转换的成功和效果。 ### 回答2: Uni-app是近年来流行的一种开发框架,可以支持一次开发,多端发布。其中包括小程序、H5、APP、快应用等各种端,这样无需重复编写代码,并且可以满足不同平台的开发需求。因此,从uni-app小程序Vue H5项目是一个很常见的需求。 首先需要了解uni-app小程序Vue H5项目的区别和联系。Uni-app小程序是基于Vue语法封装的一种小程序开发框架。Vue H5项目是基于Vue框架开发的一种web应用的项目。它们都是基于Vue语法的,但是在项目的结构、用法、以及项目特性等方面有所不同。 以下是一些步骤可以用在uni-app小程序Vue H5项目的过程中: 1. 将小程序中的小程序原有组件转换为H5支持的组件。例如,在Vue H5项目中,可以使用更多的HTML标签和CSS属性。 2. 根据不同的需求,需要对小程序的路由配置进行调整,以满足Vue H5项目的路由需求。 3. 根据项目需求进行逻辑层的代码调整。例如,H5需要针对不同的浏览器适配,需要进行不同的代码调整。 4. 将小程序的数据存储方式和H5的存储方式进行比对,进行适当的代码转换。 5. 在Vue H5项目中,可以使用许多Vue插件和库扩展项目的功能。因此需要根据项目需要选择相应的插件和库进行集成。 6. 在开发Vue H5项目过程中,需要注重H5项目页面的美观与交互性。因此,需要重新设计和开发H5项目所需要的页面,以更好地适配PC平台的浏览器。 总之,将uni-app小程序Vue H5项目的过程中,需要进行许多的代码调整和UI设计。需要针对不同的项目需求进行适当的操作,在转换的过程中注意一些注意项,确保项目可以正常运行。通过这种方式,可以将uni-app小程序开发的代码实现在更多的平台实现。 ### 回答3: uni-app 是一个利用Vue.js技术构建的一体化开发框架,其允许开发者使用Vue.js语法编写一次代码,即可发布到多个端(微信小程序/App/安卓/H5等),实现一次开发,多端运营,大大节省了开发者的时间和成本。而vue h5则是在web端开发中,使用Vue框架,专门用于手机端适配的项目,在使用上类似于uni-app。 将uni-app小程序转换为vue h5项目,需要经过以下几个步骤: 1. 确认需要转换的项目内容:需要先明确需要转换的小程序页面或组件,以及对应的样式和功能。在转换过程中,需要开发者将原有小程序组件和API替换成vue组件和API,同时也需要对样式进行适配。 2. 安装vue-cli:在转化uni-app小程序之前,首先需要确认电脑已经安装好vue-cli。Vue CLI是官方提供的一个基于webpack的标准脚手架工具,开发者可以使用这个工具进行脚手架搭建和项目管理。 3. 创建vue h5项目:在安装vue-cli之后,可以通过命令行工具创建vue h5项目。通过创建项目之后,开发者可以在其中添加需要转换的uni-app小程序内容。 4. 转换小程序内容:对于需要转换的小程序页面和组件,需要开发者根据vue h5开发需要,将其中的小程序组件和API进行替换,同时将样式进行适配。在转化完成后,需要对代码进行调试和优化,确保项目能够正常运行。 在转换uni-app小程序vue h5项目时,需要开发者具备一定的Vue.js框架开发经验,了解小程序和H5端的开发差异,进行差异化操作和代码调试。在转换项目时,开发者可以使用已有的组件库和API,降低开发成本,提高开发效率。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值