0
点赞
收藏
分享

微信扫一扫

Nissi商城首页(三):仿唯品会的商品分类和品牌导航功能(完美)


一、前言

上一节实现了搜索和导航功能,代码层面也对静态数据统一管理,想要学习的可以看上一篇文章。

本节继续实现我们的Nissi商城首页的商品分类导航和 品牌导航。原始效果如下:

Nissi商城首页(三):仿唯品会的商品分类和品牌导航功能(完美)_xml

二、功能分析

从上面原始效果图可以看到一共有两个区域,商品的分类导航和商品的品牌导航。

商品分类导航:每一行有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);
}
/*=================品牌分类导航-结束====================*/

此处省略样式部分代码块......可以看源码!

三、结果

Nissi商城首页(三):仿唯品会的商品分类和品牌导航功能(完美)_ico_02

举报

相关推荐

0 条评论