uniapp——项目02

news2025/1/17 13:56:34

分类 

创建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.coloradmin.cn/o/1197323.html

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

相关文章

运动耳机推荐，运动耳机哪个牌子好性价比高？哪个运动耳机好？

运动耳机推荐，运动耳机哪个牌子好性价比高？哪个运动耳机好？

​无论你是喜欢户外跑步&#xff0c;还是喜欢室内健身&#xff0c;运动耳机都能为你提供强大的音乐动力&#xff0c;帮助你更好地享受运动的过程&#xff0c;边流汗边听歌太畅快了&#xff01;因此。想了解哪个品牌的运动耳机更适合自己&#xff0c;就来看看我发布的这篇文章吧…
阅读更多...
Python 使用tkinter的Text文本域实时显示光标位置

Python 使用tkinter的Text文本域实时显示光标位置

在Python tkinter中&#xff0c;可以使用Text widget的index()方法来获取实时光标的行和列。该方法接受一个字符串参数&#xff0c;用于指定要获取的索引位置&#xff0c;例如"insert"表示当前光标位置。 重难点&#xff1a;想要获取准确的光标位置&#xff0c;需要…
阅读更多...
ffmpeg安装教程（windows、Linux下python环境）

ffmpeg安装教程（windows、Linux下python环境）

本文旨在向大家介绍ffmpeg在Windows和Linux系统中的安装方法。 目录 一、Windows 安装 ffmpeg1.1 官网下载 ffmpeg 运行程序1.2 环境配置1.3 测试 二、Linux 安装ffmpeg2.1 Linux中安装ffmpeg2.2 python环境安装 ffmpeg2.1.1 为什么要介绍这个2.1.1 成功安装示例 一、Windows …
阅读更多...
【Linux】语言层面缓冲区的刷新问题以及简易模拟实现

【Linux】语言层面缓冲区的刷新问题以及简易模拟实现

文章目录 前言一、缓冲区刷新方法分类a.无缓冲--直接刷新b.行缓冲--不刷新&#xff0c;直到碰到\n才刷新c.全缓冲--缓冲区满了才刷新 二、 缓冲区的常见刷新问题1.问题2.刷新本质 三、模拟实现1.Mystdio.h2.Mystdio.c3.main.c 前言 我们接下来要谈论的是我们语言层面的缓冲区&…
阅读更多...
【扩散模型】万字长文全面理解与应用Stable Diffusion

【扩散模型】万字长文全面理解与应用Stable Diffusion

万字长文全面理解与应用Stable Diffusion 1. Stable Diffusion简介1.1 基本概念1.2 主体结构1.3 训练细节1.4 模型评测1.5 模型应用1.6 模型版本1.7 其他类型的条件生成模型1.8 使用DreamBooth进行微调 2. 实战Stable Diffusion2.1 环境准备2.2 从文本生成图像2.3 Stable Diffu…
阅读更多...
GPT4 Turbo 究竟更新了什么

GPT4 Turbo 究竟更新了什么

GPT4 Turbo 究竟更新了什么 记忆力和上下文理解能力增强 现在的GPT4可以理解128K的文本&#xff0c;相当于几百页的内容&#xff0c;你的GPT4再也不会忘记你之前说的什么了&#xff0c;换句话说之前他只能记住一篇文章&#xff0c;而现在可以记住一整本书的内容了 API降价 输入…
阅读更多...
多个div横向排列的几种方法

多个div横向排列的几种方法

以下面这组 div 为例&#xff0c;group的高度由内容撑开 <div id"group"><div id"div1">div1</div><div id"div2">div2</div><div id"div3">div3</div> </div>显示结果如下为上下排…
阅读更多...
dart packages 版本问题解决 和 对 pubspenc.lock 的深入了解

dart packages 版本问题解决 和 对 pubspenc.lock 的深入了解

先讲讲我遇到的问题 在进行写项目的时候&#xff0c;我需要用到一个依赖 这个依赖是 3.0.0 版本的&#xff0c;但是实际上我本地的上存在多个版本 虽然我修改了 pubspenc.yaml 文件中需要的依赖&#xff0c;但是每次使用的还是 3.4.0 版本的依赖&#xff0c;但是我需要的是 3…
阅读更多...
Linux 进程优先级 | 环境变量

Linux 进程优先级 | 环境变量

目录 进程优先级 基本概念 认识优先级 PRI and NI NI值的范围 查看进程优先级 用top命令更改已存在进程的nice&#xff1a; 如何修改优先级 其他概念 环境变量 基本概念 常见环境变量 和环境变量相关的命令 环境变量的组织方式 通过代码如何获取环境变量 环境变量通…
阅读更多...
减轻关键基础设施网络安全风险的 3 种方法

减轻关键基础设施网络安全风险的 3 种方法

物理安全和网络安全之间存在相当大的重叠&#xff0c;特别是在保护关键基础设施方面。防止基础设施被篡改需要在物理安全方面进行大量投资&#xff0c;但任何连接到互联网的设备都代表着更广泛网络的潜在攻击点。 缺乏足够保护的设备可能会给这些对手在网络中提供立足点&#…
阅读更多...
【数据结构】树与二叉树（十）：二叉树的先序遍历（非递归算法NPO）

【数据结构】树与二叉树（十）：二叉树的先序遍历（非递归算法NPO）

文章目录 5.2.1 二叉树二叉树性质引理5.1&#xff1a;二叉树中层数为i的结点至多有 2 i 2^i 2i个&#xff0c;其中 i ≥ 0 i \geq 0 i≥0。引理5.2&#xff1a;高度为k的二叉树中至多有 2 k 1 − 1 2^{k1}-1 2k1−1个结点&#xff0c;其中 k ≥ 0 k \geq 0 k≥0。引理5.3&…
阅读更多...
【Java 进阶篇】Java Web 开发之 JQuery 快速入门

【Java 进阶篇】Java Web 开发之 JQuery 快速入门

嗨&#xff0c;各位小伙伴们&#xff01;欢迎来到 Java Web 开发的继续学习之旅。在前面的博客中&#xff0c;我们学习了 Servlet、JSP、Filter、Listener 等基础知识&#xff0c;今天我们将进入前端领域&#xff0c;学习一下如何使用 JQuery 来简化和优化我们的前端开发。 1.…
阅读更多...
学习c#的第五天

学习c#的第五天

目录 C# 运算符 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 其他运算符 C# 中的运算符优先级 C# 运算符 算术运算符 下表显示了 C# 支持的所有算术运算符。假设变量 A 的值为 10&#xff0c;变量 B 的值为 20&#xff0c;则&#xff1a; 运算符描述实例…
阅读更多...
Python实战：绘制直方图的示例代码，数据可视化获取样本分布特征

Python实战：绘制直方图的示例代码，数据可视化获取样本分布特征

文章目录 一、初步二、参数三、绘图类型四、多组数据直方图对比Python技术资源分享1、Python所有方向的学习路线2、学习软件3、精品书籍4、入门学习视频5、实战案例6、清华编程大佬出品《漫画看学Python》7、Python副业兼职与全职路线 一、初步 对于大量样本来说&#xff0c;如…
阅读更多...
Lightgraph.js节点图引擎【低代码开发利器】

Lightgraph.js节点图引擎【低代码开发利器】

Lightgraph.js是一个 Javascript 节点图引擎库&#xff0c;可以实现类似虚幻引擎的蓝图编程&#xff0c;包括一个编辑器来构建和测试节点图&#xff0c;支持浏览器和Node.js&#xff0c;可以轻松集成到任何现有的 Web 应用程序中&#xff0c;并且无需编辑器即可运行节点图。 在…
阅读更多...
vscode 和 keil协同使用开发stm32程序，超详细教程

vscode 和 keil协同使用开发stm32程序，超详细教程

vscode 和 keil协同使用开发stm32程序 文章目录 vscode 和 keil协同使用开发stm32程序1. 安装vscode拓展安装chinese插件 2 .安装Mingw3.配置环境变量4. 打开Keil项目 VSCODE 是一款广受好评的代码编辑器&#xff0c; KEIL 是常用的嵌入式开发工具但编程界面简陋。 将两个工具…
阅读更多...
无人驾驶智能:两车居然可以“交流”

无人驾驶智能:两车居然可以“交流”

导读“这些智能车看着个子小小的&#xff0c;却有大用途&#xff0c;可以说是无人驾驶车的雏形……”昨日&#xff0c;在重庆大学光电工程学院内&#xff0c;记者看到了几辆个头不大的智能小车&#xff0c;是大学生自主设计的无人驾驶车的雏形。据悉&#xff0c;它们在8月26日结…
阅读更多...
Java学习 9.Java-数组 讲解及习题

Java学习 9.Java-数组 讲解及习题

一、数组的定义与使用 1.数组的基本概念 1.1 为什么要使用数组 数组是最简单的一种数据结构 组织一组相同类型数据的集合 数据结构本身是来描述和组织数据的 数据加结构 1.2.1 数组的创建 代码实现 new int 可省略&#xff1b; char[] chars{a,b,c};//定义一个整形类型数…
阅读更多...
MobaXterm 安装+使用

MobaXterm 安装+使用

目录 1 下载安装 1.1 官网下载(速度慢) 1.2 WebRA下载(不是最新版) 2 常用功能 2.1 基础设置 2.2 常用功能 1 下载安装 1.1 官网下载(速度慢) 点击MobaXterm官网,按下图↓↓步骤下载 1.2 WebRA下载(不是最新版) 点击WebRA网址,按下图↓↓步骤下载 2 常用功能 2.1 基础设…
阅读更多...
vscode必须安装的两个插件

vscode必须安装的两个插件

文章目录 Live ServerVue Language Features (Volar) Live Server 用来启动htmljscss项目。 Vue Language Features (Volar) vue语法校验和提示。 Vue Language Features安装大概率会失败&#xff0c;需要使用vsix文件安装。 下载vsix&#xff08;vscode安装失败后右下角有…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023