学习目标——
能够知道如何使用scroll-view实现cate分类页面的开发
能够知道如何在uni-app中自定义my-search组件
能够知道如何使用CSS实现吸顶的样式效果
能够知道如何使用CSS实现单行文本溢出时显示为省略号的效果
能够知道如何实现搜索框防抖的功能
能够知道如何使用Set对象解决搜索关键词重复的问题
创建cate分支
git checkout -b cate
调用小程序的api设置scroll-view的高度
<scroll-view class="left-scroll-view" scroll-y="true" :style="{height:wh+'px'}">
onLoad() {
// 获取当前系统的信息
const sysInfo = uni.getSystemInfoSync()
// 为 wh 窗口可用高度动态赋值
this.wh = sysInfo.windowHeight
}
由此，设置了scroll-view的固定高度铺满了屏幕。
效果如下
.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: #fff;
position: relative;
// 渲染激活项左侧的红色指示边线
&::before {
content: ' ';
display: block;
width: 3px;
height: 30px;
background-color: #c00000;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
}
}
}
.right-scroll-view{
background-color: #fff;
}
}
---------------------------------------------------------
渲染一级分类
<!-- 左侧的滚动视图区域 -->
<scroll-view class="left-scroll-view" scroll-y :style="{height: wh +
'px'}">
<block v-for="(item, i) in cateList" :key="i">
<view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChanged(i)">{{item.cat_name}}</view>
</block>
</scroll-view>
methods如下
methods:{
async getCateList() {
// 发起请求
const { data: res } = await
uni.$http.get('/api/public/v1/categories')
// 判断是否获取失败
if (res.meta.status !== 200) return uni.$showMsg()
// 转存数据
this.cateList = res.message
},
// 选中项改变的事件处理函数
activeChanged(i) {
this.active = i
}
}
--------------------------------------------
渲染二级和三级分类列表
动态渲染二级分类
动态渲染三级分类
<!-- 动态渲染三级分类的列表数据 -->
<view class="cate-lv3-list">
<!-- 三级分类 Item 项 -->
<view class="cate-lv3-item" v-for="(item3, i3) in item2.children"
:key="i3">
<!-- 图片 -->
<image :src="item3.cat_icon"></image>
<!-- 文本 -->
<text>{{item3.cat_name}}</text>
</view>
</view>
------------------------------------------
.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;
}
}
----------------------------
flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
常见父项属性
flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-warp：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了flex-direction和flex-warp
———————————————
原文链接：https://blog.csdn.net/GJM_Memory/article/details/123216277
优化分类页面的效果
切换一级分类后重置滚动条的位置
利用scroll-view的scroll-top属性
// 点击三级分类项跳转到商品列表页面
gotoGoodsList(item3) {
uni.navigateTo({
url: '/subpkg/goods_list/goods_list?cid=' + item3.cat_id
})
}
-----------
<!-- 三级分类 Item 项 -->
<view class="cate-lv3-item" v-for="(item3, i3) in item2.children"
:key="i3" @click="gotoGoodsList(item3)">
<!-- 图片 -->
<image :src="item3.cat_icon"></image>
<!-- 文本 -->
<text>{{item3.cat_name}}</text>
</view>
自定义搜索组件
引用组件
<my-search></my-search>
使用uni-ui图标
<uni-icons type="search" size="17"></uni-icons>
定义好属性之后就可以在组件调用的时候进行配置
封装click事件
可以自定义绑定事件的名字，如myclick。
导航跳转与吸顶效果
跳转至搜索页面
gotosearch(){
uni.navigateTo({
url: '/subpkg/search/search'
})
}
首页添加搜索组件
<view class="search-box">
<my-search :bgcolor="'#000000'" :radius="20" @click="gotosearch"></my-search>
</view>
样式
.search-box {
// 设置定位效果为“吸顶”
position: sticky;
// 吸顶的“位置”
top: 0;
// 提高层级，防止被轮播图覆盖
z-index: 999;
}
搜索页面
在搜索框的外层添加容器设置为吸顶
<view class="search-box">
<!-- 使用 uni-ui 提供的搜索组件 -->
<uni-search-bar placeholder="请输入搜索内容" @input="input" :radius="100" cancelButton="none">
</uni-search-bar>
</view>
uni-search-bar属性
防抖处理，一定时间之后才发起请求，防止浪费
input(e) {
// e.value 是最新的搜索内容
// 清除 timer 对应的延时器
clearTimeout(this.timer)
// 重新启动一个延时器，并把 timerId 赋值给 this.timer
this.timer = setTimeout(() => {
// 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
this.kw = e
console.log(this.kw)
}, 500)
}
---------------------------------------------
根据关键词查询搜索建议列表
.goods-name {
// 文字不允许换行（单行文本）
// 溢出部分隐藏
overflow: hidden;
// 文本溢出后，使用 ... 代替
text-overflow: ellipsis;
margin-right: 3px;
}
------------------------------------------------
搜索历史
computed: {
historys() {
// 注意：由于数组是引用类型，所以不要直接基于原数组调用 reverse 方法，以免修改原数
//组中元素的顺序
// 而是应该新建一个内存无关的数组，再进行 reverse 反转
return [...this.historyList].reverse()
}
}
saveSearchHistory(){
// 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)
}
-------------------------------------
// 清空搜索历史记录
cleanHistory() {
// 清空 data 中保存的搜索历史
this.historyList = []
// 清空本地存储中记录的搜索历史
uni.setStorageSync('kw', '[]')
}
--------------------------------------------