uniapp——项目02

分类 

创建cate分支

渲染分类页面的基本结构

效果页面,包含左右两个滑动区.

利用提供的api获取当前设备的信息。用来计算窗口高度。可食用高度就是屏幕高度减去上下导航栏的高度。 

最终效果:

每一个激活项都特殊背景色，又在尾部加了个红条一样的东西。

 

  export default {data() {return {//当前设备可用高度wh:0};},onLoad(){const info = uni.getSystemInfoSync()this.wh=info.windowHeight}}

<style lang="scss">
.scroll-view-container{display:flex 
}
.left-scroll-view{width:120px
}
.left-scroll-view-item{background-color: #F7F7F7;line-height: 60px;text-align: center;font-size: 12px;&.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>

获取分类数据

动态渲染左侧的一级分类列表

 

动态渲染右侧的二级分类列表

响应数据格式如下，每个一级分类下面有二级分类，二级分类下又有三级分类。

 

 

动态渲染右侧的三级分类列表

.cate-lv3-list {
display: flex;
flex-wrap: wrap;
.cate-lv3-item {
width: 33.33%;
margin-bottom: 10px;
display: flex;
flex-direction: column;
align-items: center;
image {
width: 60px;
height: 60px;
}
text {
font-size: 12px;
}
}
}

 最终实现效果如下

 

切换一级分类后重置滚动条的位置

// 选中项改变的事件处理函数
activeChanged(i) {
this.active = i
this.cateLevel2 = this.cateList[i].children
// 让 scrollTop 的值在 0 与 1 之间切换
this.scrollTop = this.scrollTop === 0 ? 1 : 0
// 可以简化为如下的代码：
// this.scrollTop = this.scrollTop ? 0 : 1
}

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

跳转的同时将分类id一起传过去。

分支合并与提交 

搜索

在主页面的顶部和分类页面的顶部都有一个搜索框，点击之后就可以跳转到对应搜索组件。这里会有搜索历史和搜索建议。

创建搜索分支

自定义搜索组件

自定义 my-search 组件

美化组件样式如下 

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

效果如下 同时，可用高度应该减去搜索框的高度，所以要对之前代码进行改造。

通过自定义属性增强组件的通用性

然后现在就可以由调用它的父组件动态指定搜索框的背景颜色了。 

为自定义组件封装 click 事件并进行搜索页面的跳转

3.在分类页面中使用 my-search 自定义组件时，即可通过 @click 为其绑定点击事件处理函 数：

<!-- 使用自定义的搜索组件 -->
<my-search @click="gotoSearch"></my-search>

同时在分类页面中，定义 gotoSearch 事件处理函数如下：

这里有一个要注意的地方，这里的页面跳转逻辑不可以在公共组件内进行处理。

methods: {
// 跳转到分包中的搜索页面
gotoSearch() {
uni.navigateTo({
url: '/subpkg/search/search'
})
}
}

 这里在父组件为子组件定义的事件，必须在子组件内部手动调用.

这里要先在subpkg分包里面新建一个search页面,新建完后就可以实现点击自动跳转了。

实现首页搜索组件的吸顶效果

随着页面的滑动，搜索组件不会随着滑动消失，而是一直在首部，这就是吸顶效果。

搜索建议

渲染搜索页面基本结构

1. 定义如下的 UI 结构：

<view class="search-box">
<!-- 使用 uni-ui 提供的搜索组件 -->
<uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>
</view>

2. 修改 components -> uni-search-bar -> uni-search-bar.vue 组件，将默认的白色搜索背 景改为 #C00000 的红色背景：

.uni-searchbar {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
position: relative;
padding: 16rpx;
/* 将默认的 #FFFFFF 改为 #C00000 */
background-color: #c00000;
}

3. 实现搜索框的吸顶效果：

.search-box {
position: sticky;
top: 0;
z-index: 999;
}

 4. 定义如下的 input 事件处理函数：

methods: {
input(e) {
// e是最新的搜索内容
console.log(e)
}
}

实现搜索框自动获取焦点

在<uni-search-bar>标签里加:focus='true'这样子也可以自动获取焦点。 

实现搜索框的防抖处理

每次输入新内容都会触发input函数，这样是不行的，所以只有当用户500毫秒内没有输入任何内容才发起搜索请求。

1. 在 data 中定义防抖的延时器 timerId 如下：

2. 修改 input 事件处理函数如下：

input(e) {
// 清除 timer 对应的延时器
clearTimeout(this.timer)
// 重新启动一个延时器，并把 timerId 赋值给 this.timer
this.timer = setTimeout(() => {
// 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
this.kw = e.value
console.log(this.kw)
}, 500)
}

 根据关键词查询搜索建议列表

这里的e.value也要改成e才可以。 

 渲染搜索建议列表

1. 定义如下的 UI 结构：

<!-- 搜索建议列表 -->
<view class="sugg-list">
<view class="sugg-item" v-for="(item, i) in searchResults" :key="i"
@click="gotoDetail(item.goods_id)">
<view class="goods-name">{{item.goods_name}}</view>
<uni-icons type="arrowright" size="16"></uni-icons>
</view>
</view>

2. 美化搜索建议列表：

.sugg-list {
padding: 0 5px;
.sugg-item {
font-size: 12px;
padding: 13px 0;
border-bottom: 1px solid #efefef;
display: flex;
align-items: center;
justify-content: space-between;
.goods-name {
// 文字不允许换行（单行文本）
white-space: nowrap;
// 溢出部分隐藏
overflow: hidden;
// 文本溢出后，使用 ... 代替
text-overflow: ellipsis;
margin-right: 3px;
}
}
}

3. 点击搜索建议的 Item 项，跳转到商品详情页面：

搜索历史

渲染搜索历史记录的基本结构

1. 在 data 中定义搜索历史的 假数据 ：

2. 渲染搜索历史区域的 UI 结构： 

    <!-- 搜索历史 --><view class="history-box"><!-- 标题区域 --><view class="history-title"><text>搜索历史</text><uni-icons type="trash" size="17"></uni-icons></view><!-- 列表区域 --><view class="history-list"><uni-tag :text="item" v-for="(item, i) in historyList" :key="i"></uni-tag></view></view>

 3. 美化搜索历史区域的样式：

 .history-box {padding: 0 5px;.history-title {display: flex;justify-content: space-between;align-items: center;height: 40px;font-size: 13px;border-bottom: 1px solid #efefef;}.history-list {display: flex;flex-wrap: wrap;.uni-tag {margin-top: 5px;margin-right: 5px;}}}

实现搜索建议和搜索历史的按需展示

  <!-- 搜索建议列表 --><view class="sugg-list" v-if="searchResults.length !== 0"><!-- 省略其它代码... --></view><!-- 搜索历史 --><view class="history-box" v-else><!-- 省略其它代码... --></view>

将搜索关键词存入 historyList

1. 直接将搜索关键词 push 到 historyList 数组中即可

 methods: {// 根据搜索关键词，搜索商品建议列表async getSearchList() {// 省略其它不必要的代码...// 1. 查询到搜索建议之后，调用 saveSearchHistory() 方法保存搜索关键词this.saveSearchHistory()},// 2. 保存搜索关键词的方法saveSearchHistory() {// 2.1 直接把搜索关键词 push 到 historyList 数组中this.historyList.push(this.kw)}}

解决关键字前后顺序的问题

    computed: {historys() {// 注意：由于数组是引用类型，所以不要直接基于原数组调用 reverse 方法，以免修改原数组中元素的顺序// 而是应该新建一个内存无关的数组，再进行 reverse 反转return [...this.historyList].reverse()}}

 解决关键词重复的问题

      // 2. 保存搜索关键词的方法saveSearchHistory() {// 2.1 直接把搜索关键词 push 到 historyList 数组中// this.historyList.push(this.kw)// 1. 将 Array 数组转化为 Set 对象const set = new Set(this.historyList)// 2. 调用 Set 对象的 delete 方法，移除对应的元素set.delete(this.kw)// 3. 调用 Set 对象的 add 方法，向 Set 中添加元素set.add(this.kw)// 4. 将 Set 对象转化为 Array 数组this.historyList = Array.from(set)}

将搜索历史记录持久化存储到本地

1. 修改 saveSearchHistory 方法如下：

 // 保存搜索关键词为历史记录saveSearchHistory() {const set = new Set(this.historyList)set.delete(this.kw)set.add(this.kw)this.historyList = Array.from(set)// 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地uni.setStorageSync('kw', JSON.stringify(this.historyList))}

 清空搜索历史记录

点击搜索历史跳转到商品列表页面

2. 在 methods 中定义 gotoGoodsList 处理函数：

// 点击跳转到商品列表页面
gotoGoodsList(kw) {
uni.navigateTo({
url: '/subpkg/goods_list/goods_list?query=' + kw
})
}

分支的合并与提交

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Git】的分支和标签的讲解及实际应用场景

【Git】的分支和标签的讲解及实际应用场景

目录 一、讲解 1. 环境讲述 2. 应用原因 3. 分支标签的区别 二、分支 1. 命令 2. 场景应用 三、标签 1. 命令 2. 标签规范 3. 应用场景 每篇一获 一、讲解 1. 环境讲述 当软件从开发到正式环境部署的过程中&#xff0c;不同环境的作用如下&#xff1a; 开发环境&a…
阅读更多...
【iOS开发】iOS App的加固保护原理：使用ipaguard混淆加固

【iOS开发】iOS App的加固保护原理：使用ipaguard混淆加固

​ 摘要 在开发iOS应用时&#xff0c;保护应用程序的安全是非常重要的。本文将介绍一种使用ipaguard混淆加固的方法来保护iOS应用的安全。通过字符串混淆、类名和方法名混淆、程序结构混淆加密以及反调试、反注入等主动保护策略&#xff0c;可以有效地保护应用程序的安全性。 …
阅读更多...
vscode因为大文件而无限崩溃的问题，窗口意外终止(原因:“oom“,代码:“-536870904“

vscode因为大文件而无限崩溃的问题，窗口意外终止(原因:“oom“,代码:“-536870904“

复制了一大堆的代码&#xff08;好几兆&#xff09;到一个文件里&#xff0c;然后就导致 vscode 卡死&#xff0c; 之后就算把该文件删掉了&#xff0c;打开vscode还是会默认打开该文件而卡死 解决办法&#xff1a; win R 输入 %appdata%/code/ 删除该文件夹下的 backups/ 文件…
阅读更多...
SW如何显示样条曲线的控标

SW如何显示样条曲线的控标

刚刚学习隔壁老王的sw画图时&#xff0c;怎么点都点不出样条曲线的控标&#xff0c;于是果断查询了一下解决方法&#xff0c;其实很简单&#xff0c;只不过是培训机构故意不说&#xff0c;叫你还解决不了&#xff0c;难受了就会花钱买他们的课了。毕竟如果学会了怎么解决问题了…
阅读更多...
Unity 制作血量滑动条（Slider）

Unity 制作血量滑动条（Slider）

1.创建UI slider 层级面板点击右键-UI-slider 2.调整UI位置 选择2D视图&#xff0c;调整锚点和滑动条位置 3.PS中制作UI 导出2个图层&#xff0c;PNG格式。 4.改成精灵模式&#xff08;sprite2d&#xff09; 把两个PNG导入Unity仓库中&#xff0c;选中两个图&#xff0c;右…
阅读更多...
Leetcode刷题详解—— 目标和

Leetcode刷题详解—— 目标和

1. 题目链接&#xff1a;494. 目标和 2. 题目描述&#xff1a; 给你一个非负整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 或 - &#xff0c;然后串联起所有整数&#xff0c;可以构造一个 表达式 &#xff1a; 例如&#xff0c;nums [2, 1] &#xff0c;可…
阅读更多...
代码随想录 Day43 动态规划11 LeetCode T309 买卖股票的最佳时期含冷冻期 T714买卖股票的最佳时机含手续费

代码随想录 Day43 动态规划11 LeetCode T309 买卖股票的最佳时期含冷冻期 T714买卖股票的最佳时机含手续费

LeetCode T309 买卖股票的最佳时机含冷冻期 题目链接:309. 买卖股票的最佳时机含冷冻期 - 力扣&#xff08;LeetCode&#xff09; 题目思路: 这题其实就是将卖出的状态拆分成三个状态 1.前两天就卖出并一直保持卖出的状态 2.今天卖出的状态 3.今天是冷冻期的状态 当然还有一个…
阅读更多...
积极应对云网络安全

积极应对云网络安全

以下是 IT 领导者需要了解的内容&#xff0c;才能在云网络安全方面占据上风。 如果您的组织尚未主动解决云网络安全问题&#xff0c;则将面临灾难的风险。等待攻击发生根本没有意义。 主动云安全会采取积极措施来发现潜在威胁并在网络攻击发生之前阻止网络攻击。 这是通过持…
阅读更多...
C++学习---信号处理机制、中断、异步环境

C++学习---信号处理机制、中断、异步环境

文章目录 前言信号处理signal()函数关于异步环境 信号处理函数示例raise()函数 前言 信号处理 关于信号&#xff0c;信号是一种进程间通信的机制&#xff0c;用于在程序执行过程中通知进程发生了一些事件。在Unix和类Unix系统中&#xff0c;信号是一种异步通知机制&#xff0c…
阅读更多...
Azure 机器学习 - 如何使用模板创建安全工作区

Azure 机器学习 - 如何使用模板创建安全工作区

目录 先决条件了解模板配置模板连接到工作区疑难解答错误&#xff1a;Windows 计算机名的长度不能超过 15 个字符&#xff0c;并且不能全为数字或包含以下字符 本教程介绍如何使用 [Microsoft Bicep]和 [Hashicorp Terraform]模板创建以下 Azure 资源&#xff1a; Azure 虚拟网…
阅读更多...
Netty - 回顾Netty高性能原理和框架架构解析

Netty - 回顾Netty高性能原理和框架架构解析

文章目录 概述JDK 原生 NIO 程序的问题Why Netty使用场景Related ProjectsNetty 高性能设计I/O 模型【阻塞 I/O】&#xff1a;【I/O 复用模型】【基于 Buffer】 线程模型事件驱动模型Reactor 线程模型Netty的线程模型异步处理 Netty框架的架构设计功能特性模块组件Bootstrap、S…
阅读更多...
新方向！文心一言X具身智能，用LLM大模型驱动智能小车

新方向！文心一言X具身智能，用LLM大模型驱动智能小车

具身智能已成为近年来研究的热点领域之一。具身智能强调将智能体与实体环境相结合&#xff0c;通过智能体与环境的交互&#xff0c;来感知和理解世界&#xff0c;最终实现在真实环境中的自主决策和运动控制。 如何基于文心大模型&#xff0c;低成本入门“具身智能”&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023