uni-app--》如何实现网上购物小程序（中上）？

news2024/10/1 7:28:44

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、

🛺系列专栏：uni-app

🚲座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。

👀引言

        ⚓经过web前端的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了uni-app专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第二站就是uni-app开发，希望看到我文章的朋友能对你有所帮助。

目录

分类页面

导航菜单设置

渲染左侧内容界面

三级分类跳转到商品列表页面

搜索组件样式的实现

搜索页面的功能实现

搜索页面数据处理

分类页面

分类页面的页面布局需要分为左右布局，左边是导航菜单，右边是具体内容，在最顶部设置一个搜索框进行相关关键字的搜索，具体的实现过程如下：

导航菜单设置

通过调用分类列表导航菜单数据接口，并将其转存到data中在页面中进行调用，如下：

因为导航菜单打算占据整个可用视口，这里需要我们调用uni-app给我们提供的API，如下：

在页面刚渲染的时候进行调用这个API，如下：

接下来给菜单布局结构和样式，并设置当我们点击某个菜单时，给当前的菜单添加一个点击事件并给出相关样式，给出完整代码如下：

<template>
	<view class="scroll-view-container">
		<!-- 左侧的滚动视图区域 -->
		<scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}" >
			<block v-for="(item,index) in cateList" :key="index">
				<view 
					:class="['left-scroll-view-item',index === active ? 'active' : '']" 
					@tap="activeChanged(index)"
				>
					{{item.cat_name}}
				</view>
			</block>
		</scroll-view>
		<!-- 右侧的滚动视图区域 -->
		<scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}" >
			<view class="left-scroll-view-item">zzz</view>
			<view class="left-scroll-view-item">zzz</view>
			<view class="left-scroll-view-item">zzz</view>
			<view class="left-scroll-view-item">zzz</view>
			<view class="left-scroll-view-item">zzz</view>
			<view class="left-scroll-view-item">zzz</view>
			<view class="left-scroll-view-item">zzz</view>
			<view class="left-scroll-view-item">zzz</view>
			<view class="left-scroll-view-item">zzz</view>
			<view class="left-scroll-view-item">zzz</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wh:0, // 当前设备的可用高度
				cateList:[], // 分类列表数据
				active:0, // 默认的激活项
			};
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowHeight
			// 调用分类列表数据函数
			this.getCateList()
		},
		methods:{
			// 获取分类列导航菜单表数据函数
			getCateList(){
				uni.request({
					url:'https://www.uinav.com/api/public/v1/categories',
					success:res => {
						this.cateList = res.data.message
					},
					fail:error => {
						uni.$showMsg()
					}
				})
			},
			// 改变导航菜单的激活状态
			activeChanged(index){
				this.active = index
			}
		}
	}
</script>

<style lang="scss">
// 解决小程序和app滚动条的问题
/* #ifdef MP-WEIXIN || APP-PLUS */
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	  }
/* #endif */

// 解决H5 的问题 
/* #ifdef H5 */
	uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}
/* #endif */
.scroll-view-container{
	display: flex;
	// 左侧导航区域
	.left-scroll-view{
		width: 120px;
		.left-scroll-view-item{
			background-color: #ececec;
			line-height: 60px;
			text-align: center;
			font-size: 15px;
			&.active{
				background-color: #FFFFFF;
				position: relative;
				&::before{
					content: '';
					display: block;
					width: 3px;
					height: 30px;
					background-color: #C00000;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
				}
			}
		}
	}
}
</style>

渲染左侧内容界面

接下来实现左侧内容界面的样式布局页面的设置，在我们调用获取分类列表导航菜单的数据当中，存放着当前分类下的二级分类的数据，我们需要将其提起并转存到data当中，如下：

ok，接下来我们需要在设置导航菜单的点击事件中，根据索引，为导航菜单重新赋值 ：

接下来开始渲染左侧内容区域的相关内容，给出的结构如下：

相关样式如下所示：

因为内容在滑动的过程中发生了滑动距离，当切换另一个界面时，滑动距离会保持原来的状态，这里的话可用 scroll-top 属性进行解决，方法如下：

具体结果如下所示：

三级分类跳转到商品列表页面

接下来实现，当我们点击商品图片的时候，进行链接跳转到商品列表页面，如下：

具体实现效果如下：

搜索组件样式的实现

因为搜索功能的组件在首页和分类页面都需要用到，所以这里我将搜索功能封装成组件，在uni-app中约定俗成的要将组件都放置到components组件当中去，如下：

在项目根目录的 components 当中，鼠标右键，选择右键新建组件，填写组件信息之后，最后点击 创建按钮即可，如下：

接下来开始对搜索组件的内容进行相关编写，设置两个view进行包裹，外层弄颜色里层弄样式。样式的数据可以设置props进行动态的绑定数据，可以让用户根据传递的数值来动态渲染数据，具体编写如下：

这里的 uni-icons 标签解释一下，这里使用的是uni-app官网给我们提供的扩展组件里面的样式：

插件安装完成之后，按照基本用法的方式进行使用即可，相关样式可以根据自己的需求进行相关的修改即可，这里不再赘述，接下来给出搜索框的相关样式的编写，如下：

.my-search-container{
	height: 50px;
	align-items: center;
	padding: 0 10px;
	.my-search-box{
		background-color: #FFFFFF;
		height: 36px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.placeholder{
			font-size: 15px;
			margin-left: 5px;
		}
	}
}

 因为搜索框本身的高度会挤占一部分可视化窗口，这里的话需要对原本分类界面的可视化距离进行一个修改，让其减去搜索框的高度，不然的话搜索框的随着屏幕的滑动而消失，如下：

ok解决完分类的页面路由，在首页我们同样需要使用搜索组件，这里的我采用的是固定定位进行解决，解决完成之后，发现样式有点丑，这里的话我将搜索组件的样式设置为IE模型，如下：

具体实现的效果如下：

接下来实现当点击搜索组件时进行页面的跳转，跳转到一个单独的搜索界面，实现过程如下：

搜索功能的实现很简单，只需要在自定义组件的my-search组件中绑定点击事件，让其跳转到相关页面即可，然而在自定义组件中设置的点击事件，默认是传递自定义组件中的属性事件，为了让其变为原生的点击事件，需要借助uni-app的一个api：native如下：

接下来在分包的文件夹中新建search文件组件，当点击搜索组件时，跳转到搜索页面，如下：

搜索页面的功能实现

接下来实现搜索界面的功能，这里需要借用uni-app官方给我们提供的扩展组件，如下：

安装完插件直接引入一个基本用法的案例即可，得到的界面如下，说明我们引入插件成功：

根据官网给我们提供的属性数据，我们可以根据自己的需求来进行相关的样式处理，如下：

背景颜色和当点击搜索组件跳入到搜索页面自动获取焦点的功能，可以在插件的源代码进行修改

样式布局完成之后，我们需要对输入框进行防抖处理，避免用户在输入过程中每次都瞬间获取数据来消耗资源，如下：

接下来我们开始调用搜索内容的接口，并将数据存放到data中去，如下：

搜索页面数据处理

接下来将输入框输入的数据传递到后端，调用接口来获取相关数据，并将数据渲染到前端页面上，如下：

设置如下样式：

接下来处理搜索完成后的历史记录，给出完整代码如下：

<template>
	<view>
		<!-- 搜索输入框 -->
		<view class="search-box">
			<uni-search-bar :radius="100" @input="input" cancelButton="none"></uni-search-bar>
		</view>  
		<!-- 搜索列表界面 -->
		<view class="sugg-list" v-if="searchResults.length !== 0">
			<view class="sugg-item" v-for="(item,index) in searchResults" :key="index" @tap="gotoDetail(item)">
				<view class="goods-name">{{item.goods_name}}</view>
				<uni-icons type="arrowright" size="16"></uni-icons>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="history-box" v-else>
			<!-- 标题区域 -->
			<view class="history-title">
				<text>搜索历史</text>
				<uni-icons type="trash" size="17" @click="clean"></uni-icons>
			</view>
			<!-- 内容区域 -->
			<view class="history-tag">
				<!-- <uni-tag text="标签"></uni-tag> -->
				<uni-tag :inverted="true" :text="item" v-for="(item,index) in historys" :key="index" @click="gotoGoodsList(item)"/>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				timer:null, // 延时器的id
				keywords:'' ,// 搜索的关键词
				searchResults:[], // 搜索的结果列表 
				historyList:[], // 搜索历史记录数据
			};
		},
		onLoad() {
		  this.historyList = JSON.parse(uni.getStorageSync('keywords') || '[]')
		},
		computed: {
		  historys() {
			// this.historyList = this.keywords
		    // 注意：由于数组是引用类型，所以不要直接基于原数组调用 reverse 方法，以免修改原数组中元素的顺序
		    // 而是应该新建一个内存无关的数组，再进行 reverse 反转
		    return [...this.historyList].reverse()
		  }
		},
		methods:{
			// 输入框监听事件
			input(e){
				clearTimeout(this.timer)
				this.timer = setTimeout(()=>{
					this.keywords = e
					this.getSearchList()
				},500)
			},
			getSearchList(){
				// 判断搜索关键词是否为空
				if(this.keywords.length ===0 ){
					this.searchResults = []
					return
				}
				uni.request({
					url:'https://www.uinav.com/api/public/v1/goods/qsearch',
					data: {
						query:this.keywords
					},
					success:res => {
						this.searchResults = res.data.message
						this.saveSearchHistory()
					},
					fail:error => {
						uni.$showMsg()
					}
				})
			},

			// 跳转到详情页面
			gotoDetail(item){
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id 
				})
			},
			saveSearchHistory(){
			  // 保存历史记录
			  this.historyList.push(this.keywords) 				
			  // 1. 将 Array 数组转化为 Set 对象
			  const set = new Set(this.historyList)
			  // 2. 调用 Set 对象的 delete 方法，移除对应的元素
			  set.delete(this.keywords)
			  // 3. 调用 Set 对象的 add 方法，向 Set 中添加元素
			  set.add(this.keywords)
			  // 4. 将 Set 对象转化为 Array 数组
			  this.historyList = Array.from(set)
			  // 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地
			  uni.setStorageSync('keywords', JSON.stringify(this.historyList))
			},
			// 清空历史记录
			clean(){
				this.historyList = []
				uni.setStorageSync('keywords','[')
			},
			// 点击跳转到商品列表页面
			gotoGoodsList(kw) {
			  uni.navigateTo({
			    url: '/subpkg/goods_list/goods_list?query=' + kw
			  })
			}

		}
	}
</script>

<style lang="scss">
.search-box{
	position: sticky;
	top: 0;
	z-index: 10;
}
.sugg-list{
	padding: 0 5px;
	.sugg-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		padding: 13px 0;
		border-bottom: 1px solid #efefef;
		.goods-name{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}
.history-box{
	padding: 0 5px;
	.history-title{
		display: flex;
		justify-content: space-between;
		height: 40px;
		align-items: center;
		font-size: 13px;
		border-bottom: 1px solid #efefef;
	}
	.history-tag{
		display: flex;
		flex-wrap: wrap;
		.uni-tag{
			margin-top: 5px;
			margin-right: 5px;
			display: block;
			text-align: center;
			width: 20px;
		}
	}
}
</style>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Jenkins终极部署详细版

Jenkins终极部署详细版

&#xff08;一&#xff09;首先你需要配置好虚拟机的JDK环境和Maven环境 1、配置JDK环境 &#xff08;1&#xff09;上传安装包&#xff0c;然后解压 &#xff08;2&#xff09;修改Linux环境变量 具体参考&#xff1a; https://blog.csdn.net/u010227042/article/details/1…
阅读更多...
腾讯云轻量应用服务器可以修改镜像，但有限制！

腾讯云轻量应用服务器可以修改镜像，但有限制！

腾讯云轻量应用服务器镜像可以更换或修改吗&#xff1f;可以&#xff01;镜像可以修改&#xff0c;镜像是指轻量服务器的预装操作系统&#xff0c;轻量服务器创建成功后镜像也是可以更换的&#xff0c;如下图&#xff1a; 腾讯云轻量应用服务器镜像可以修改 目录 轻量服务器修…
阅读更多...
自适应模糊PID控制算法

自适应模糊PID控制算法

一、自适应模糊PID控制 自适应模糊PID控制将模糊控制与传统PID控制相结合&#xff0c;将两种控制方式进行结合&#xff0c;取长补短&#xff0c;对传统的算法进行优化&#xff0c;形成一种新的控制算法&#xff0c;自适应模糊PID控制可以用于很多场景&#xff0c;比如温度控制&…
阅读更多...
stm32下载代码到单片机上需要调节BOOT为什么模式

stm32下载代码到单片机上需要调节BOOT为什么模式

一、BOOT模式选择图解 二、BOOT模式介绍 所谓启动&#xff0c;一般来说就是指下好程序后&#xff0c;重启芯片时&#xff0c;SYSCLK的第4个上升沿&#xff0c;BOOT引脚的值将被锁存。用户可以通过设置BOOT1和BOOT0引脚的状态&#xff0c;来选择在复位后的启动模式。 A. Mai…
阅读更多...
【读书笔记】《MySQL技术NM InnoDB存储引擎》第一章 MySQL体系结构和存储引擎

【读书笔记】《MySQL技术NM InnoDB存储引擎》第一章 MySQL体系结构和存储引擎

文章目录第一章 MySQL体系结构和存储引擎前言1.1 定义数据库和实例1.2MySQL体系结构1.3MySQL存储引擎1.3.1InnoDB存储引擎1.3.2MyISAM存储引擎1.3.3NDB存储引擎1.3.4 Memory存储引擎1.3.5其他存储引擎1.4各存储引擎之间的比较1.5连接MySQL1.5.1 TCP/IP1.5.2命名管道和共享内存1…
阅读更多...
np.concatenate函数和np.append函数用于数组拼接

np.concatenate函数和np.append函数用于数组拼接

一&#xff1a;np.concatenate() 函数介绍&#xff1a;np.concatenate((a, b), axis0)参数意思&#xff1a;a和b都为数组&#xff0c;axis可以选择大小&#xff0c;axis0 按照行拼接。axis1 按照列拼接。 对于一维数组&#xff0c;情况如下&#xff1a; import numpy as np a…
阅读更多...
客户关系管理系统的设计与实现(论文+源码)_kaic

客户关系管理系统的设计与实现(论文+源码)_kaic

摘 要 近些年来&#xff0c;由于信息科技的不断进步&#xff0c;网络也越来越深入到了各行各业中&#xff0c;信息量呈现的方式各种各样。我们所处的时代社会不管在经济体制、方式&#xff0c;或是在居民消费构成上都产生了巨大的变化&#xff0c;然而现代科技不仅仅为人们生…
阅读更多...
fastadmin弹窗添加二级类别

fastadmin弹窗添加二级类别

在程序开发中，经常遇上有一、二级表格情况，例如ask和answer，一个ask中，就有很多个answer，如果在后台中分两个列表很容易实现，但很不直观，现通过代码，实现在ask列表中，每个item添加一个查看answer按钮，点击该按钮弹窗显示对应的answer列表，在该弹窗中实现增删改查操作…
阅读更多...
什么是MVCC?MVCC解决了什么问题？MVCC的实现原理？

什么是MVCC?MVCC解决了什么问题？MVCC的实现原理？

1.什么是MVCC&#xff1f; MVCC全称是【Multi-Version ConCurrency Control】&#xff0c;即多版本控制协议。 多版本控制&#xff08;Multiversion Concurrency Control&#xff09;: 指的是一种提高并发的技术。最早的数据库系统&#xff0c;只有读读之间可以并发&#xff…
阅读更多...
LNMP架构部署

LNMP架构部署

目录一、安装 Nginx 服务1、安装依赖包2、创建运行用户3、编译安装4、优化路径5、添加 Nginx 系统服务二、安装 MySQL 服务1、安装Mysql环境依赖包2、创建运行用户3、编译安装4、修改mysql 配置文件5、更改mysql安装目录和配置文件的属主属组6、设置路径环境变量7、初始化数据库…
阅读更多...
15.网络爬虫—selenium验证码破解

15.网络爬虫—selenium验证码破解

网络爬虫—selenium验证码破解一selenium验证码破解二破解平台打码平台超级鹰文识别基于人工智能的定制化识别平台 —图灵三英文数字验证码破解selenium破解验证码快捷登录古诗文网四滑动验证码破解selenium滑动验证码破解网易网盾测试案例五总结六后记前言&#xff1a; &#…
阅读更多...
鲁祥老师吉他课学习笔记

鲁祥老师吉他课学习笔记

鲁祥老师吉他课学习笔记 导语 参考教材&#xff1a; 《吉他入门经典教程》李国标 《弹指之间》潘尚文 《吉他教本》好连得出版社 《吉他教程》杰瑞吉他学校 《伯克利现代吉他教程》 《吉他考级教程》英国RSL其中的原声吉他和电吉他教程 《一个月电吉他新手养成计划》宫胁俊郎 …
阅读更多...
C51 - LCD12864

C51 - LCD12864

LCD128641> 项目概述2> LCD12864参数2.1> LCD硬件原理框图2.2> 工作原理2.2> 6800接口引脚功能2.3> 6800接口时序3> 硬件设计4> 程序设计4.1> 初始化4.2 > 清屏4.3> 显示ASCII码4.4> 显示图片5> 复盘总结1> 项目概述 51单片机驱动LC…
阅读更多...
用不了chatgpt，试试Claude-Claude注册教程

用不了chatgpt，试试Claude-Claude注册教程

Claude是一款人工智能聊天机器人,由 Anthropic 公司开发。说到Anthropic公司就有意思了&#xff0c;Anthropic成立于2021年&#xff0c;其联合创始人Dario Amodei曾经担任OpenAI 研究副总裁&#xff0c;后来因为对OpenAI变成了CloseAI&#xff0c;心存不满&#xff0c;因此就自…
阅读更多...
App 抓包提示网络异常怎么破？

App 抓包提示网络异常怎么破？

背景 当你测试App的时候&#xff0c;想要通过Fiddler/Charles等工具抓包看下https请求的数据情况&#xff0c;发现大部分的App都提示网络异常/无数据等等信息。以“贝壳找房”为例&#xff1a; Fiddler中看到的请求是这样的&#xff1a; 你可能开始找证书的问题&#xff1a;是…
阅读更多...
【MySQL】（2）数据类型

【MySQL】（2）数据类型

文章目录数据类型分类数值类型文本、二进制类型日期和时间类型String 类型数据类型分类 MySQL 支持多种数据类型&#xff0c;大致可分为数值类型&#xff0c;文本、二进制类型&#xff0c;时间日期&#xff0c;String类型。 数值类型 类型字节有符号范围无符号范围TINYINT1-1…
阅读更多...
01 |「ChatGPT」简介

01 |「ChatGPT」简介

前言 ChatGPT 科普。 文章目录 前言一、ChatGPT 介绍1. ChatGPT 是什么2. ChatGPT 有哪些应用二、相关文献一、ChatGPT 介绍 登录网址：https://chat.openai.com/auth/login 1. ChatGPT 是什么 ChatGPT 是一个大型语言模型，由 OpenAl 公司训练，并基于 GPT-3.5 架构构建；它可…
阅读更多...
java设计模式（2）单例模式、工厂模式、原型模式、建造者模式

java设计模式（2）单例模式、工厂模式、原型模式、建造者模式

用pr设计的图片&#xff0c;当封面不错 单例模式 单例对象的类必须保证只有一个实例存在 饿汉式单例 饿汉式在类创建的同时就已经创建好一个静态的对象供系统使用&#xff0c;以后不再改变&#xff0c;所以天生是线程安全的 //饿汉式单例类. public class Singleton {//构…
阅读更多...
tmall.item.sizemapping.template.create( 新增天猫商品尺码表模板 )

tmall.item.sizemapping.template.create( 新增天猫商品尺码表模板 )

&#xffe5;开放平台免费API必须用户授权 新增天猫商品尺码表模板 男鞋、女鞋、运动鞋、户外鞋类目&#xff0c;尺码表维度为&#xff1a; 脚长&#xff08;cm&#xff09; 必选 内衣-文胸类目&#xff0c;尺码表维度为&#xff1a; 上胸围&#xff08;cm&#xff09; 必选 …
阅读更多...
机器学习入门实例-MNIST手写数据集-简单探索二分分类

机器学习入门实例-MNIST手写数据集-简单探索二分分类

MNIST数据集介绍 MNIST数据集包含7w张带标签的手写数字图片。每次有新的分类算法出现时&#xff0c;常常会在改数据集测试效果。 from sklearn.datasets import fetch_openml# 获取的mnist是一个字典 mnist fetch_openml(mnist_784, version1) print(mnist.keys()) # dict_k…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023