基于uniapp+u-view开发小程序【技术点整理】

一、上传图片

1.实现效果：
在这里插入图片描述
2.具体代码：

<template>
	<view>
		<view class="imgbox">
			<view>职业证书</view>
			<!-- 上传图片 -->
			<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple  :maxCount="9"></u-upload>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hostUrl: this.$api.hostImages,    //封装的图片地址
				fileList1: [], //存放图片的ur
				url_arr: [],
			}
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.url_arr.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// console.log(event.name);
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				var that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.hostUrl + '/api/upload/upload', //图片接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							// console.log('图片',res.data)
							var a = JSON.parse(res.data).initialPreview[0] //对象转数组
							var imgsUrl = a //数组转字符串
							that.url_arr.push(imgsUrl)
							// console.log('图片数组',that.url_arr)

							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

二、实现省市区的选择

三、下拉框选择

1.实现效果：
在这里插入图片描述

2.代码实现：

	<!--1.html部分-->
	<view class="item">
		<view class="item_title"><text>*</text>您的职位</view>
		<picker @change="positionArrayChange" :value="positionIndex" :range="positionArray" range-key="name">
			<input placeholder="选择" :value="positionArray[positionIndex].name"
				placeholder-style="font-size:24rpx;color:#999;font-weight: 500;" />
		</picker>
		<image class="moreimg" :src="localImgSrc('more4@2x.png')"></image>
	</view>
	
	<!--2.JS部分-->
	<script>
		export default {
			data() {
				return {
					positionArray: [], //职位数组
					positionIndex: null, //职位id
				}
			},
			methods: {
				//职位的接口
				positionFun() {
					var that = this
					this.$api.appPlateForm('POST', this.$url.position, '', function(res) {
						console.log('职位', res)
						that.positionArray = res.data
					})
				},
				//点击选择职位
				positionArrayChange: function(e) {
					console.log('选中的职位', e.detail.value)
					this.positionIndex = e.detail.value
				},
			}
		}
	</script>

四、自定义单选框

1.实现效果
在这里插入图片描述
2.代码实现：

<template>
	<view class="home_content">
		<view class="itembox">
			<view class="item" :class="{'item_active':type==1}" @click="addClass(1)">
				<view>
					<view class="title">个人认证</view>
					<view class="">适用于专业技术人才认证</view>
				</view>
				<view class="right"></view>
				<image :src="localImgSrc('s_xz@2x.png')"></image>
			</view>
			
			<view class="item" :class="{'item_active':type==2}" @click="addClass(2)">
				<view>
					<view class="title">企业认证</view>
					<view class="">适用于企业高管 法人资质认证</view>
				</view>
				<view class="right"></view>
				<image :src="localImgSrc('s_xz@2x.png')"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
			}
		},
		methods: {
			// 动态添加class
			addClass(index) {
				this.type = index;
				console.log(this.type)

			},
		
			nextFun() {
				//type:1个人认证，2企业认证
				if (this.type == 1) {
					uni.navigateTo({
						url: '/pages/attestation/personalCertification'
					})
				} else if (this.type == 2) {
					uni.navigateTo({
						url: '/pages/attestation/companyCertification'
					})
				} else {
					uni.showToast({
						title: '请选择认证类型',
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: RGBA(248, 248, 248, 1);
		padding-bottom: 100rpx;
	}
	.home_content {
		width: 100%;
	}
	.selectbox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 30rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin-top: -370rpx;
		position: relative;
		margin-bottom: 20rpx;
	}
	.selectbox image {
		width: 242rpx;
		height: 161rpx;
	}
	.selectbox .tit {
		font-size: 42rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 15rpx;
	}
	.itembox {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		position: relative;
	}
	.itembox .item {
		width: 100%;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 60rpx 0 40rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #999999;
	}
	.itembox .item image {
		width: 35rpx;
		height: 35rpx;
		display: none;
	}

	.itembox .item .title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 30rpx;
	}

	.itembox .item .right {
		width: 35rpx;
		height: 35rpx;
		background: #FFFFFF;
		border: 2rpx solid #999999;
		border-radius: 50%;
	}
	.item_active {
		border: 3rpx solid #4D9FFE !important;
	}
	.item_active image {
		display: block !important;
	}
	.item_active .right {
		display: none !important;
	}
</style>

五、搜索

5.1 u-view里的搜索组件

1.实现效果：
在这里插入图片描述

2.具体代码：

<!--html-->
<view class="topSearch">
<!--这里需要注意一下：如果只使用 search 事件，点击搜索按钮是没有反应的，需要再加一个 custom-->
	<u-search placeholder="搜索关键词..." v-model="keyword" @search="searchHistory" :show-action="true" @custom="searchHistory"></u-search>
</view>

<!--js-->
<script>
	export default {
		data() {
			return {
				keyword: '',
			}
		},
		
		methods: {
			//搜索接口
			getSearch() {
				var that = this;
				var data = {
					keyword: that.keyword
				}
				this.$api.appPlateForm('POST', this.$url.index_search, data,
				 function(res) {})
			},
			//点击搜索
			searchHistory(value) {
				console.log('获取到搜索框的内容：',value)
				this.keyword = value
				this.page = 1
				this.activityFun()
			},

		}
	}
</script>

<style>
	.topSearch {
		width: 690rpx;
		height: 70rpx;
		background: #F4F6F5;
		border-radius: 35rpx;
		margin: auto;
		box-sizing: border-box;
		padding-right: 20rpx;
	}
	/deep/ .u-search__content {
		height: 70rpx !important;
		background-color: transparent !important;
		border-width: 0 !important;
	}
	/deep/ .u-search__content input {
		background-color: transparent !important;
	}
</style>

5.2 纯手写搜索（包括搜索、搜索记录、热门搜索）

1.实现效果
在这里插入图片描述
2.具体代码：

<template>
	<view class="uni_search">
		<view class="search">
			<view class="search_box">
				<input class="search_input" type="text" v-model.trim="keywords" placeholder="搜索关键词..."
					placeholder-style="font-size: 24rpx;color:#999999;" />
			</view>
			<view class="search_close" @click="inputFun">搜索</view>
		</view>
		
		<view class="history" v-if="is_searchcon == 0">
			<view class="history_top">
				<view class="history_top_row">
					<view class="history_title">
						搜索记录
					</view>
					<view  @click="clearHistory()">
						<image :src="localImgSrc('icon_delete@2x.png')"></image>
						清除
					</view>
				</view>
				
			</view>
			<view class="history_con">
				<view class="history_con_li" v-for="(itemH,indexH) in searchHistory" :key='indexH'>
					<view class="" @tap="history_li(itemH)">
						{{itemH}}
					</view>
				</view>
				<view class="zanwu" v-if="searchHistory == ''">暂无搜索历史</view>
			</view>
		</view>
		<view class="hot_search">
			<view class="history_top">
				<view class="history_title">
					热门搜索
				</view>
			</view>
			<view class="history_con">
				<view class="history_con_li history_con_li_hot" v-for="(item,index) in hotsearch" :key='index'>
					<view class="" @tap="history_li(item.title)">
						<image class="hotimg" :src="localImgSrc('hot@2x.png')"></image>{{item.title}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords: '', //关键词
				isSearch: false, //是否搜索
				hotsearch: [], //热门搜索内容
				is_searchcon: 0, //是否存在搜索内容  1是0否
				searchContent: [], //搜索结果内容
				searchHistory: [] ,//搜索历史
			}
		},
	
		onLoad() {
			this.getHotSearch()
			//在缓存里取到历史数据
			this.searchHistory = JSON.parse(uni.getStorageSync('searchLocal'));
		},
		onShow(){
			this.is_searchcon = 0
		},
		methods: {
			//点击搜索
			inputFun() {
				var that = this;
				if (that.keywords == '') {
					uni.showToast({
						title: '请输入搜索内容',
						icon: 'none'
					})
					that.is_searchcon = 0;
				} else {
					that.is_searchcon = 1;
					uni.navigateTo({
						url:'/pages/home/searchResult?keywords=' + that.keywords
					})
					//搜索历史存入缓存
					var s = 0; //判断有无重复  0无
					this.searchHistory.forEach((item, index) => {
						if (item == this.keywords) {
							s++
							this.searchHistory.splice(index, 1);
							this.searchHistory.unshift(this.keywords)
						}
					})
					if (s == 0) {
						this.searchHistory.unshift(this.keywords)
					}
					//只获取搜索历史的前20个显示
					uni.setStorageSync('searchLocal', JSON.stringify(this.searchHistory.slice(0, 20)));
				}
			},
			
			
			//点击搜索历史里的内容（点击热门搜索里的某一条）
			history_li(keyword) {
				var that = this;
				that.keywords = keyword;
				//搜索结果接口
				that.inputFun();
			},

			//清空历史搜索
			clearHistory() {
				this.searchHistory = []
				uni.setStorageSync('searchLocal', '');
			},

			//热门搜索接口
			getHotSearch() {
				var that = this;
				this.$api.appPlateForm('POST', this.$url.hot_search, '', function(res) {
					that.hotsearch = res.data
				})
			},
		}
	}
</script>

<style>
	.uni_search {
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 100%;
		overflow: hidden;
	}

	.search {
		margin-top: 20rpx;
		margin-bottom: 60rpx;
		width: 100%;
		height: 68rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.search_box {
		background-color: #F4F6F5;
		width: 620rpx;
		height: 68rpx;
		border-radius: 68rpx;
		padding-left: 86rpx;
		box-sizing: border-box;
		background-image: url(https://qqh.qqbd.vip/static/index/head/search@2x.png);
		background-repeat: no-repeat;
		background-position: 30rpx center;
		background-size: 36rpx 36rpx;
	}

	.search_input {
		width: 100%;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 24rpx;
	}

	.search_close {
		font-size: 26rpx;
	}


	.history {
		margin-bottom: 60rpx;
	}

	.history_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 30rpx;
		margin-bottom: 32rpx;
	}



	.history_con {
		display: flex;
		flex-wrap: wrap;
	}

	.history_con_li {
		
		width: auto;
		height: auto;
		background: #F6F6F6;
		border-radius: 30rpx;
		padding: 18rpx 23rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		margin-right: 12rpx;
		margin-bottom: 26rpx;
	}

	.history_con_li_hot {
		display: flex;
		align-items: center;
	}

	.history_con_li_hot image {
		width: 21rpx;
		height: 27rpx;
		margin-left: 8rpx;
	}
	.history_top_row{
		display: flex;
		align-items: center;
		justify-content: space-between;width: 100%;
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}
	.history_top_row image{
		width: 30rpx;
		height: 30rpx;
		margin-right: 4rpx;
	}
	.history_top_row>view{
		display: flex;
		align-items: center;
	}
	.history_title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	.hotimg{
		width: 30rpx;
		height: 30rpx;
		margin-right: 6rpx;
	}
	.history_con_li_hot>view{
		display: flex;
		align-items: center;
	}
	.zanwu {
		color: #333333;
		font-size: 24rpx;
		text-align: center;
		width: 100%;
	}
</style>

六、滚动加载

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/2344.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C语言蓝桥杯刷题：修剪灌木

C语言蓝桥杯刷题：修剪灌木

题目链接 解题思路&#xff1a; 本题需要注意的是树是白天长&#xff0c;然后爱丽丝傍晩对某棵树进行修剪&#xff0c;也就是说树高度是可能在白天达到最大值而在傍晩变成0。我一开始也有一个误区&#xff0c;以为是要修剪的那棵树当天就变成0而不能生长&#xff0c;其实是先…
阅读更多...
vue后台管理系统

vue后台管理系统

后面可参考下&#xff1a;vue系列&#xff08;三&#xff09;——手把手教你搭建一个vue3管理后台基础模板 以下代码项目gitee地址 文章目录1. 初始化前端项目初始化项目添加加载效果配置 vite.config.js2. 使用路由安装路由配置路由配置别名和跳转安装pathvite.config.jsjsco…
阅读更多...
C++类和对象（上篇）

C++类和对象（上篇）

目录 1.类的定义 2.类的访问限定符及封装 2.1类的访问限定符 2.2封装 3.类的作用域 4.类的实例化 5.类的大小 6.this 指针 1.类的定义 class className {// 类体&#xff1a;由成员函数和成员变量组成}; // 一定要注意后面的分号 class为定义类的关键字&#xff0c;Clas…
阅读更多...
Golang每日一练(leetDay0012)

Golang每日一练(leetDay0012)

目录 34. 查找元素首末位置 Find-first-and-last-position-of-element-in-sorted-array &#x1f31f;&#x1f31f; 35. 搜索插入位置 Search Insert Position &#x1f31f; 36. 有效的数独 Valid Sudoku &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 …
阅读更多...
VsCode SSH远程连接服务器【内网穿透公网连接】

VsCode SSH远程连接服务器【内网穿透公网连接】

文章目录1.前言2.VS code的安装和设置2.1 VS code的下载安装2.2 OpenSSH的启用2.3 为VS code配置ssh2.4 局域网内测试VS code的ssh连接2.5 Cpolar下载安装3.Cpolar端口设置3.1 Cpolar云端设置3.2 Cpolar本地设置4.公网访问测试5.结语1.前言 记得笔者小时候看电视&#xff0c;看…
阅读更多...
【安全与风险】密码学介绍

【安全与风险】密码学介绍

密码学介绍密码历史密码换位&#xff08;Transposition&#xff09;与置换&#xff08;Substitution&#xff09;替换密码&#xff08;Substiution Cipher&#xff09;凯撒密码 &#xff08;100BC 公元前100年&#xff09;移位密码破坏替换密码维吉尼亚密码现代密码学核心原理从…
阅读更多...
TCP三次握手/四次挥手

TCP三次握手/四次挥手

TCP三次握手 任何基于TCP的应用&#xff0c;在发送数据之前&#xff0c;都需要由TCP进行“三次握手”建立连接示意图 第一次握手&#xff1a;客户端PC发送一个SYN位置1&#xff08;SYN1代表请求服务端建立连接&#xff09;的TCP报文发送给要建立TCP连接的Server&#xff0c;此…
阅读更多...
23种设计模式

23种设计模式

参考链接&#xff1a; 【狂神说Java】通俗易懂的23种设计模式教学&#xff08;停更&#xff09;_哔哩哔哩_bilibili 23种设计模式【狂神说】_狂神说设计模式_miss_you1213的博客-CSDN博客 1. 单例模式 参考链接&#xff1a; 【狂神说Java】单例模式-23种设计模式系列_哔哩哔哩…
阅读更多...
Linux(网络基础---网络层)

Linux(网络基础---网络层)

文章目录0. 前言1. IP协议1-1 基本概念1-2 协议头格式2. 网段划分2-1 基本概念2.2 IP地址分五大类2-3 特殊的IP地址2-4 IP地址的数量限制2-5 私有IP地址和公网IP地址2-6 路由0. 前言 前面我们讲了&#xff0c;应用层、传输层&#xff1b;本章讲网络层。 应用层&#xff1a;我…
阅读更多...
GPT-4是个编程高手，真服了！

GPT-4是个编程高手，真服了！

上周给大家发了一个GPT-4教数学的介绍&#xff0c;很多人都被震撼了&#xff0c;感觉有可能在教育行业引发革命。它在编程领域表现如何&#xff1f;先不说能否替代程序员&#xff0c;这个还有待更多的测试和反馈&#xff0c;我想先试试它能不能像教数学那样教编程。我找了个Jav…
阅读更多...
Docker的可视化界面工具

Docker的可视化界面工具

Docker的可视化界面工具1. Portainer1.1 Introduction1.1.1 Official1.2 Download And Deploy1.3 Dashboard1.3.1 Dashboard2. Shipyard2.1 Introduction2.1.1 Character2.1.2 Official2.2 Download And Deploy2.2.1 脚本下载镜像2.2.2 执行脚本2.2.2 查看下载的镜像2.3 Dashbo…
阅读更多...
“工作三年，跳槽要求涨薪50%”，合理吗？

“工作三年，跳槽要求涨薪50%”，合理吗？

如果问在TI行业涨工资最快的方式是什么&#xff1f;回答最多的一定是&#xff1a;跳槽&#xff01;前段时间&#xff0c;知乎上这样一条帖子引发了不少IT圈子的朋友的讨论 &#xff0c;有网友提问 “程序员跳槽要求涨薪50%过分吗&#xff1f;”截图来源于知乎&#xff0c;如侵删…
阅读更多...
【百面成神】多线程基础16问，你能坚持到第几问

【百面成神】多线程基础16问，你能坚持到第几问

前 言 &#x1f349; 作者简介&#xff1a;半旧518&#xff0c;长跑型选手&#xff0c;立志坚持写10年博客&#xff0c;专注于java后端 ☕专栏简介&#xff1a;纯手打总结面试题&#xff0c;自用备用 &#x1f330; 文章简介&#xff1a;多线程最基础、重要的16道面试题 文章目…
阅读更多...
【百面成神】Redis基础11问，你能坚持到第几问

【百面成神】Redis基础11问，你能坚持到第几问

前 言 &#x1f349; 作者简介&#xff1a;半旧518&#xff0c;长跑型选手&#xff0c;立志坚持写10年博客&#xff0c;专注于java后端 ☕专栏简介&#xff1a;纯手打总结面试题&#xff0c;自用备用 &#x1f330; 文章简介&#xff1a;Redis最基础、重要的11道面试题 文章目录…
阅读更多...
AI 未来已至，向量数据库站在新的节点上

AI 未来已至，向量数据库站在新的节点上

“AI 的 iPhone 时刻已经到来。” 在刚刚结束的 NVIDIA GTC Keynote 中&#xff0c;这句话被 NVIDIA CEO 黄仁勋反复提及&#xff0c;长达 1 个多小时的分享中&#xff0c;生成式 AI 相关的内容占据了绝大部分比重。他表示&#xff0c;生成式 AI 的火热能力为企业带来了挑战&a…
阅读更多...
2022/3/22 从CV方向角度 —快速解读Nvidia 2023GTC

2022/3/22 从CV方向角度 —快速解读Nvidia 2023GTC

GTC分享内容和个人看法 3月21号11点&#xff0c;Nvidia开启了GTC主题演讲&#xff0c;这些年英伟达加速库的发展和对AI的投入应用&#xff0c;不难看出掌握GPU加速计算技术的N家肯定是宣扬AI方向的产品和生产工具&#xff0c;下面我将简要汇总下演讲的内容&#xff0c;和从我自…
阅读更多...
Java语言-----类与对象的秘密

Java语言-----类与对象的秘密

目录 前言 一、类与对象的介绍 二、类的实例化 三.类与对象的使用方法 3.1对象的初始化 3.2内存显示图 四.this的使用方法 总结 &#x1f63d;个人主页&#xff1a; tq02的博客_CSDN博客-C语言,Java领域博主 &#x1f308;理想目标&#xff1a;努力学习&#xff0c;向Java进…
阅读更多...
修改linux网卡配置文件的文件名

修改linux网卡配置文件的文件名

修改linux网卡配置文件的文件名 查看自己系统中网卡配置文件的文件名 #查看网卡的配置文件名&#xff0c;已经网络的状态 ip a查看系统是否可以使用ifconfig命令 #输入命令 ifconfig #出现以下图片表示ifconfig的命令可用。可能出现的错误&#xff1a;ifconfig command no foun…
阅读更多...
第十七天 JavaScript、Vue详细总结

第十七天 JavaScript、Vue详细总结

目录 JavaScript、Vue 1. JavaScript常用对象 1.1 Array对象 1.2 String对象 1.3 自定义对象 1.4 JSON 1.5 BOM 1.6 DOM 2. 事件监听 2.1 事件绑定 2.2 常见事件 2.3 案例 3. Vue 3.1 概述 3.2 快速入门 3.3 常用指令 3.4 生命周期 JavaScript、Vue 今日目标&…
阅读更多...
为什么说网络安全是风口行业？是IT行业最后的红利？

为什么说网络安全是风口行业？是IT行业最后的红利？

前言 “没有网络安全就没有国家安全”。当前&#xff0c;网络安全已被提升到国家战略的高度&#xff0c;成为影响国家安全、社会稳定至关重要的因素之一。 网络安全行业特点 1、就业薪资非常高&#xff0c;涨薪快 2021年猎聘网发布网络安全行业就业薪资行业最高人均33.77万&…
阅读更多...
最新文章

Copyright @ 2022~2023