一、前言
上一节实现了搜索和导航功能，代码层面也对静态数据统一管理，想要学习的可以看上一篇文章。Nissi商城首页（二）：仿唯品会的搜索和导航栏功能（完美）
https://blog.csdn.net/zhenghhgz/article/details/125698547
本节继续实现我们的Nissi商城首页的商品分类导航和 品牌导航。原始效果如下：
二、功能分析
从上面原始效果图可以看到一共有两个区域，商品的分类导航和商品的品牌导航。
商品分类导航：每一行有5个分类进行了平铺，每个包含2个元素（分类icon 和 分类名称）。
商品品牌导航：每行有4个类型进行了平铺，每个类型包含2个元素（导航icon 和 名称），组成一张卡片，每隔3秒钟翻转一次。
三、开发
1、代码目录结构
├─pages
│ └─index
│ index.js
│ index.json
│ index.wxml
│ index.wxss PS：继续在首页里面添加功能
2、代码片段
page/index/index.wxml 部分
<!--商品分类导航-->
<view class="goods-classify">
<block wx:for-items="{
{tabGoodsList}}" wx:key="name">
<view class="goods-list" data-type="{
{item.id}}" data-typeid="{
{item.id}}">
<image src="{
{item.icon}}" />
<text>{
{item.name}}</text>
</view>
</block>
</view>
<!--品牌分类导航-->
<view class="brand-classify">
<view class="brand-list" wx:for-items="{
{tabBrandList}}" wx:key="id">
<view class="brand b1" data-type="{
{item.id}}" data-typeid="{
{item.id}}" animation="{
{animationZ}}">
<image src="{
{item.icon}}" />
<text>{
{item.name}}</text>
</view>
<view class="brand b2" data-type="{
{item.id}}" data-typeid="{
{item.id}}" animation="{
{animationF}}">
<image src="{
{item.icon}}" />
<text>{
{item.name}}</text>
</view>
</view>
</view>page/index/index.js 部分
onLoad: function (options) {
var defaultTab = this.data.tabList[0];
//加载商品分类导航
this.goodsListShow(defaultTab.id);
//加载品牌分类导航
this.brandListShow(defaultTab.id);
//每3秒钟翻转一次品牌分类
// this.brandListTime(this.data.pointId);
},
goodsListShow: function (e) {
var tabGoodsList = indexData.tabGoodsList[e];
console.log("classify="+e);
this.setData({
tabGoodsList: tabGoodsList
})
},
brandListShow: function (e) {
var tabBrandList = indexData.tabBrandList[e];
console.log("brand="+e);
this.setData({
tabBrandList: tabBrandList
})
},
rotateFn(pointId) {
let that = this
// let id = e;
// 点击正面
if (pointId == 1) {
this.setData({
animationZ: that.animation.rotateY(180).step().export(),
animationF: that.animation.rotateY(0).step().export(),
pointId: 2
})
} else { //点击反面
this.setData({
animationZ: that.animation.rotateY(0).step().export(),
animationF: that.animation.rotateY(180).step().export(),
pointId: 1
})
}
},
brandListTime : function() {
this.data.Interval = setInterval(() => {
var pointId = this.data.pointId;
console.log("pointId="+pointId);
this.rotateFn(pointId);
this.setData({
Numbers: ++this.data.Numbers
})
}, 3000);
},
/**
* 生命周期函数--监听页面加载
*/
animation: wx.createAnimation({
duration: 1000,
timingFunction: 'linear'
}),page/index/index.wxss 部分
/*=================商品分类导航-开始====================*/
.goods-classify {
display: flex;
justify-content: left;
flex-direction: row;
flex-wrap: wrap;
background-color: white;
border-radius: 5%;
}
.goods-list {
/* width: 18%; */
width: calc(100%/5);
display: flex;
align-items: center;
flex-direction: column;
padding: 30rpx 0;
/* padding-top: 20rpx; */
}
.goods-list image {
width: 80rpx;
height: 80rpx;
/* border-radius: 50%;设置边界圆角 */
}
.goods-list text {
padding-top: 20rpx;
font-size: 25rpx;
}
/*=================商品分类导航-结束====================*/
/*=================品牌分类导航-开始====================*/
.brand-classify{
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
margin-top: 20rpx;
}
.brand-list {
position: relative;
height: 180rpx;
width: 170rpx;
}
.brand {
background-color: white;
position: absolute;
transition: all 1s;
/* 不显示背面 */
backface-visibility: hidden;
border-radius: 10rpx;
cursor: pointer;
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
}
.brand image {
width: 120rpx;
height: 120rpx;
}
.brand text {
font-size: 25rpx;
margin-bottom: 15rpx;
}
.b1 {
}
.b2 {
transform: rotateY(-180deg);
}
/*=================品牌分类导航-结束====================*/此处省略样式部分代码块......可以看源码！
三、结果
