微信小程序分类页面开发
涉及到过微信小程序分类页面的开发,通过点击首页分类图标跳转到分类页面,这两个页面还需要改进,暂存一下这个功能及效果,方便以后开发使用,图标都是阿里巴巴矢量图标库里面自己找的,分类页面参照了一些别人写的好的地方,根据自己实际情况加以修改了。
1.页面效果图
1.1 index部分效果图为:
1.2 分类页面效果图为:
2 代码部分
2.1 index页面代码
2.11 index.js
let {
url
} = getApp().globalData
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [
'/static/temp/swiper1.jpg',
'/static/temp/swiper2.jpg',
'/static/temp/swiper3.jpg',
],
goods: [],
// imgicon:[],
indicatorDots: true, // 是否显示面板指示点
autoplay: true, // 是否自动切换
circular: true, // 是否采用衔接滑动
interval: 3000, // 自动切换时间间隔
duration: 1000, // 滑动动画时长
},
/**
* 生命周期函数--监听页面加载
*/
// myclass:function(e){
// app.globalData.curNav = 2
// wx.switchTab({
// url:"/pages/classify/classify"
// })
// },
onLoad: function(options) {
wx.request({
url: url + '/goods/good', //仅为示例,并非真实的接口地址
method: "post",
header: {
'content-type': 'application/json' // 默认值
},
success: (res) => {
this.setData({
goods: res.data.goods
})
console.log(res.data.goods)
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
2.12 index.json
引入的shoplist组件列表是下面的商品的列表,那个需要根据后端数据进行渲染
{
"component": true,
"usingComponents": {
"shoplist": "/components/shoplist/shoplist"
},
"navigationBarTitleText": "宠物商城"
}
2.13 index.wxml
<view>
<!-- 轮播图 -->
<view>
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
</view>
<!-- 轮播图 -->
<!-- 粉色区域 -->
<view class="pink_wrap">
<!-- 搜索框 -->
<navigator url="/pages/search/search" class="navigator">
<view class="input_wrap">
<icon class="icon" type="search" size="20" color="gray"></icon>
<text class="input">搜索</text>
</view>
</navigator>
<!-- 搜索框 -->
<!-- 图标列表 -->
<view class="first_line">
<navigator url="/pages/classify/classify" open-type="switchTab" class="cat">
<image src="/static/temp/mao.png" style="width:80rpx;height:80rpx;"></image>
<text class="text_margin">严选猫粮</text>
</navigator>
<navigator url="/pages/classify/classify" open-type="switchTab" class="cat">
<image src="/static/temp/wan2.png" style="width:80rpx;height:80rpx;"></image>
<text class="text_margin">严选狗粮</text>
</navigator>
<navigator class="cat" open-type="switchTab">
<image src="/static/temp/shirt.png" style="width:80rpx;height:80rpx;"></image>
<text class="text_margin">猫狗罐头</text>
</navigator>
<navigator class="cat" open-type="switchTab">
<image src="/static/temp/dog3.png" style="width:80rpx;height:80rpx;"></image>
<text class="text_margin">猫狗保健品</text>
</navigator>
<navigator class="cat" open-type="switchTab">
<image src="/static/temp/dog4.png" style="width:80rpx;height:80rpx;"></image>
<text class="text_margin">严选猫粮</text>
</navigator>
<navigator class="cat" open-type="switchTab">
<image src="/static/temp/dog5.png" style="width:80rpx;height:80rpx;"></image>
<text class="text_margin">严选猫粮</text>
</navigator>
<navigator class="cat" open-type="switchTab">
<image src="/static/temp/yao0.png" style="width:80rpx;height:80rpx;"></image>
<text class="text_margin">严选猫粮</text>
</navigator>
<navigator class="cat" open-type="switchTab">
<image src="/static/temp/dog2.png" style="width:80rpx;height:80rpx;"></image>
<text class="text_margin">严选猫粮</text>
</navigator>
<navigator class="cat" open-type="switchTab">
<image src="/static/temp/maofood.png" style="width:80rpx;height:80rpx;"></image>
<text class="text_margin">严选猫粮</text>
</navigator>
<navigator class="cat" open-type="switchTab">
<image src="/static/temp/dog0.png" style="width:80rpx;height:80rpx;"></image>
<text class="text_margin">严选猫粮</text>
</navigator>
</view>
<!-- 图标列表 -->
</view>
<!-- 粉色区域 -->
<view>
<shoplist goods="{{goods}}"> </shoplist>
</view>
</view>
2.14 index.wxss
/* 去除滚动条 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.slide-image {
width: 100%;
}
.pink_wrap {
padding: 18rpx;
height: 500rpx;
background-color: rgba(255, 152, 120, 0.8);
}
.input_wrap {
/* background-color: #fff; */
text-align: center;
display: flex;
justify-content: center;
position: relative;
}
.icon {
position: absolute;
left: 10rpx;
top: 10rpx;
}
.input {
color: gray;
font-size: 30rpx;
padding-left: 50rpx;
text-align: left;
display: block;
width: 700rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 12rpx;
background-color: #fff;
}
.first_line {
margin-top: 10rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.text_margin{
font-size: 24rpx;
}
.cat {
margin-top: 40rpx;
width: 20%;
height: 130rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.pinkarea_text {
font-size: 26rpx;
color: gray;
}
2.2 classify 页面代码
2.21 classify.js
// pages/classify/classify.js
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
cateItems: [
{
cate_id: 1,
cate_name: "猫粮",
ishaveChild: true,
children:
[
{
child_id: 1,
name: '幼猫',
image: '../../static/temp/mao.png',
},
{
child_id: 2,
name: '成猫',
image: '../../static/temp/cat02.png',
},
{
child_id: 3,
name: '全期猫',
image: '../../static/temp/cat01.png',
},
{
child_id: 4,
name: '奶糕粮',
image: '../../static/temp/mimi.png',
}
]
},
{
cate_id: 2,
cate_name: "狗粮",
ishaveChild: true,
children:
[
{
child_id: 1,
name: '幼犬',
image: '../../static/temp/dog1.png',
},
{
child_id: 2,
name: '成犬',
image: '../../static/temp/dog0.png',
},
{
child_id: 3,
name: '全期犬',
image: '../../static/temp/gou0.png',
}
]
},
{
cate_id: 3,
cate_name: "罐头",
ishaveChild: true,
children:
[
{
child_id: 1,
name: '猫罐头',
image: '../../static/temp/dog6.png',
},
{
child_id: 2,
name: '狗罐头',
image: '../../static/temp/dog4.png',
}
]
},
{
cate_id: 4,
cate_name: "猫狗保健品",
ishaveChild: true,
children:
[
{
child_id: 1,
name: '猫狗保健品',
image: '../../static/temp/dogmilk.jpg',
}
]
},
{
cate_id: 5,
cate_name: "药品系列",
ishaveChild: true,
children:
[
{
child_id: 1,
name: '药品',
image: '../../static/temp/yao0.png',
}
]
},
{
cate_id: 6,
cate_name: "零食",
ishaveChild: true,
children:
[
{
child_id: 1,
name: '零食',
image: '../../static/temp/dog3.png',
}
]
},
{
cate_id: 7,
cate_name: "个人护理",
ishaveChild: false,
children: []
}
],
curNav: 1,
curIndex: 0
},
//事件处理函数
switchRightTab: function (e) {
// 获取item项的id,和数组的下标值
let id = e.target.dataset.id,
index = parseInt(e.target.dataset.index);
// 把点击到的某一项,设为当前index
this.setData({
curNav: id,
curIndex: index
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// this.setData({
// curNav: app.globalData.curNav,
// })
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
2.22 classify.json
{
"usingComponents": {},
"navigationBarTitleText": "分类"
}
2.23 classify.wxml
<view class="search_wrap">
<!-- 搜索框 -->
<navigator url="/pages/search/search" class="navigator">
<view class="input_wrap">
<icon class="icon" type="search" size="20" color="gray"></icon>
<input class="input" auto-focus="" placeholder="搜索"></input>
</view>
</navigator>
<!-- 搜索框 -->
</view>
<view>
<!--主盒子-->
<view class="container">
<!--左侧栏-->
<view class="nav_left">
<view wx:for="{{cateItems}}" wx:key="index">
<!--当前项的id等于item项的id,那个就是当前状态-->
<!--用data-index记录这个数据在数组的下标位置,使用data-id设置每个item的id值,供打开2级页面使用-->
<view class="nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view>
</view>
</view>
<!--右侧栏-->
<view class="nav_right">
<!--如果有数据,才遍历项-->
<view wx:if="{{cateItems[curIndex].ishaveChild}}">
<block wx:for="{{cateItems[curIndex].children}}" wx:key="index">
<view class="nav_right_items">
<!--界面跳转 -->
<navigator url="/pages/goodslist/goodslist" class="navigator">
<image src="{{item.image}}"></image>
<text>{{item.name}}</text>
</navigator>
</view>
</block>
</view>
<!--如果无数据,则显示数据-->
<view class="nodata_text" wx:else>该分类暂无数据</view>
</view>
</view>
</view>
2.24 classify.wxss
.search_wrap {
background-color: #dcdcea;
padding: 12rpx;
}
.input_wrap {
/* background-color: blue; */
text-align: center;
display: flex;
justify-content: center;
position: relative;
}
.icon {
position: absolute;
left: 10rpx;
top: 10rpx;
}
.input {
color: gray;
font-size: 30rpx;
padding-left: 50rpx;
text-align: left;
display: block;
width: 700rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 12rpx;
background-color: #fff;
}
page {
background: #f5f5f5;
}
/*总体主盒子*/
.container {
position: relative;
width: 100%;
height: 100%;
background-color: #fff;
color: #939393;
}
/*左侧栏主盒子*/
.nav_left {
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 100%;
/*主盒子设置背景色为灰色*/
background: #f5f5f5;
text-align: center;
}
/*左侧栏list的item*/
.nav_left .nav_left_items {
/*每个高30px*/
height: 40px;
/*垂直居中*/
line-height: 40px;
/*再设上下padding增加高度,总高42px*/
padding: 6px 0;
/*只设下边线*/
border-bottom: 1px solid red;
/*文字14px*/
font-size: 14px;
}
/*左侧栏list的item被选中时*/
.nav_left .nav_left_items.active {
/*背景色变成白色*/
background: #fff;
color: #f0145a;
}
/*右侧栏主盒子*/
.nav_right {
/*右侧盒子使用了绝对定位*/
position: absolute;
top: 0;
right: 0;
flex: 1;
/*宽度75%,高度占满,并使用百分比布局*/
width: 75%;
height: 1000px;
padding: 10px;
box-sizing: border-box;
background: #fff;
}
/*右侧栏list的item*/
.nav_right .nav_right_items {
/*浮动向左*/
float: left;
/*每个item设置宽度是33.33%*/
width: 33.33%;
height: 120px;
text-align: center;
}
.nav_right .nav_right_items image {
/*被图片设置宽高*/
width: 60px;
height: 60px;
margin-top: 15px;
}
.nav_right .nav_right_items text {
/*给text设成块级元素*/
display: block;
margin-top: 15px;
font-size: 14px;
color: black;
/*设置文字溢出部分为...*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.nodata_text {
color: black;
font-size: 14px;
text-align: center;
}