运行如下的命令,基于 master 分支在本地创建 cate 子分支,用来开发分类页面相关的功能:
git checkout -b cate
1. 定义页面结构如下:
<template> <view> <view class="scroll-view-container"> <!-- 左侧的滚动视图区域 --> <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}"> <view class="left-scroll-view-item active">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">多复制一些节点,演示纵向滚动效果...</view> </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">多复制一些节点,演示纵向滚动效果</view> </scroll-view> </view> </view> </template>
2. 动态计算窗口的剩余高度
<script> export default { data() { return { // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度 wh: 0 }; }, onl oad() { // 获取当前系统的信息 ( 这个方法可以获取很多系统信息 ) const sysInfo = uni.getSystemInfoSync() // 为 wh 窗口可用高度动态赋值 this.wh = sysInfo.windowHeight } } </script>
3. 美化页面结构:
.scroll-view-container { display: flex; .left-scroll-view { width: 120px; .left-scroll-view-item { line-height: 60px; background-color: #f7f7f7; 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; left: 0; top: 50%; transform: translateY(-50%); } } } } }
data() { return { // 分类数据列表 cateList: [] } } onLoad() { // 调用获取分类列表数据的方法 this.getCateList() } 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 } }
<!-- 左侧的滚动视图区域 --> <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">{{item.cat_name}}</view> </block> </scroll-view>
data() { return { // 当前选中项的索引,默认让第一项被选中 active: 0 } }
<block v-for="(item, i) in cateList" :key="i"> <view :class="['left-scroll-view-item', i === active ? 'active' : '']">{{item.cat_name}}</view> </block>
<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>
methods: { // 选中项改变的事件处理函数 activeChanged(i) { this.active = i } }
data() { return { // 二级分类列表 cateLevel2: [] } }
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 // 为二级分类赋值 this.cateLevel2 = res.message[0].children }
activeChanged(i) { this.active = i // 为二级分类列表重新赋值 this.cateLevel2 = this.cateList[i].children }
<!-- 右侧的滚动视图区域 --> <scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}"> <view class="cate-lv2" v-for="(item2, i2) in cateLevel2" :key="i2"> <view class="cate-lv2-title">/ {{item2.cat_name}} /</view> </view> </scroll-view>
.cate-lv2-title { font-size: 12px; font-weight: bold; text-align: center; padding: 15px 0; }
<!-- 右侧的滚动视图区域 --> <scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}"> <view class="cate-lv2" v-for="(item2, i2) in cateLevel2" :key="i2"> <view class="cate-lv2-title">/ {{item2.cat_name}} /</view> <!-- 动态渲染三级分类的列表数据 --> <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> </view> </scroll-view>
.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; } } }
data() { return { // 滚动条距离顶部的距离 scrollTop: 0 } }
<!-- 右侧的滚动视图区域 --> <scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop"></scroll-view>
// 选中项改变的事件处理函数 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 }
<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>
// 点击三级分类项跳转到商品列表页面 gotoGoodsList(item3) { uni.navigateTo({ url: '/subpkg/goods_list/goods_list?cid=' + item3.cat_id }) }
<!-- 使用自定义的搜索组件 --> <my-search></my-search>
<template> <view class="my-search-container"> <!-- 使用 view 组件模拟 input 输入框的样式 --> <view class="my-search-box"> <uni-icons type="search" size="17"></uni-icons> <text class="placeholder">搜索</text> </view> </view> </template>
.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; } }
onLoad() { const sysInfo = uni.getSystemInfoSync() // 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度 this.wh = sysInfo.windowHeight - 50 }
为了增强组件的通用性,我们允许使用者自定义搜索组件的 背景颜色 和 圆角尺寸。
props: { // 背景颜色 bgcolor: { type: String, default: '#C00000' }, // 圆角尺寸 radius: { type: Number, // 单位是 px default: 18 } }
<view class="my-search-container" :style="{'background-color': bgcolor}"> <view class="my-search-box" :style="{'border-radius': radius + 'px'}"> <uni-icons type="search" size="17"></uni-icons> <text class="placeholder">搜索</text> </view> </view>
.my-search-container { // 移除背景颜色,改由 props 属性控制 // background-color: #C00000; height: 50px; padding: 0 10px; display: flex; align-items: center; } .my-search-box { height: 36px; background-color: #ffffff; // 移除圆角尺寸,改由 props 属性控制 // border-radius: 15px; width: 100%; display: flex; align-items: center; justify-content: center; .placeholder { font-size: 15px; margin-left: 5px; } }
<view class="my-search-box" :style="{'border-radius': radius + 'px'}" @click="searchBoxHandler"> <uni-icons type="search" size="17"></uni-icons> <text class="placeholder">搜索</text> </view>
methods: { // 点击了模拟的 input 输入框 searchBoxHandler() { // 触发外界通过 @click 绑定的 click 事件处理函数 this.$emit('click') } }
<!-- 使用自定义的搜索组件 --> <my-search @click="gotoSearch"></my-search>
methods: { // 跳转到分包中的搜索页面 gotoSearch() { uni.navigateTo({ url: '/subpkg/search/search' }) } }
<!-- 使用自定义的搜索组件 --> <view class="search-box"> <my-search @click="gotoSearch"></my-search> </view>
gotoSearch() { uni.navigateTo({ url: '/subpkg/search/search' }) }
.search-box { // 设置定位效果为“吸顶” position: sticky; // 吸顶的“位置” top: 0; // 提高层级,防止被轮播图覆盖 z-index: 999; }
<view class="search-box"> <!-- 使用 uni-ui 提供的搜索组件 --> <uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar> </view>
.uni-searchbar { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; position: relative; padding: 16rpx; /* 将默认的 #FFFFFF 改为 #C00000 */ background-color: #c00000; }
.search-box { position: sticky; top: 0; z-index: 999; }
methods: { input(e) { // e.value 是最新的搜索内容 console.log(e.value) } }
data() { return { show: true, showSync: true, searchVal: "" } }
data() { return { // 延时器的 timerId timer: null, // 搜索关键词 kw: '' } }
input(e) { // 清除 timer 对应的延时器 clearTimeout(this.timer) // 重新启动一个延时器,并把 timerId 赋值给 this.timer this.timer = setTimeout(() => { // 如果 500 毫秒内,没有触发新的输入事件,则为搜索关键词赋值 this.kw = e.value console.log(this.kw) }, 500)
data() { return { // 搜索结果列表 searchResults: [] } }
this.timer = setTimeout(() => { this.kw = e.value // 根据关键词,查询搜索建议列表 this.getSearchList() }, 500)
// 根据搜索关键词,搜索商品建议列表 async getSearchList() { // 判断关键词是否为空 if (this.kw === '') { this.searchResults = [] return } // 发起请求,获取搜索建议列表 const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: this.kw }) if (res.meta.status !== 200) return uni.$showMsg() this.searchResults = res.message }
<!-- 搜索建议列表 --> <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>
.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; } } }
gotoDetail(goods_id) { uni.navigateTo({ // 指定详情页面的 URL 地址,并传递 goods_id 参数 url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods_id }) }
data() { return { // 搜索关键词的历史记录 historyList: ['a', 'app', 'apple'] } }
<!-- 搜索历史 --> <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>
.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>
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() } }
<view class="history-list"> <uni-tag :text="item" v-for="(item, i) in historys" :key="i"></uni-tag> </view>
// 保存搜索关键词为历史记录 saveSearchHistory() { // 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) }
// 保存搜索关键词为历史记录 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)) }
onLoad() { this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]') }
<uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons>
// 清空搜索历史记录 cleanHistory() { // 清空 data 中保存的搜索历史 this.historyList = [] // 清空本地存储中记录的搜索历史 uni.setStorageSync('kw', '[]') }
<uni-tag :text="item" v-for="(item, i) in historys" :key="i" @click="gotoGoodsList(item)"></uni-tag>
// 点击跳转到商品列表页面 gotoGoodsList(kw) { uni.navigateTo({ url: '/subpkg/goods_list/goods_list?query=' + kw }) }