微信小程序分类页面开发

微信小程序分类页面开发

涉及到过微信小程序分类页面的开发，通过点击首页分类图标跳转到分类页面，这两个页面还需要改进，暂存一下这个功能及效果，方便以后开发使用，图标都是阿里巴巴矢量图标库里面自己找的，分类页面参照了一些别人写的好的地方，根据自己实际情况加以修改了。

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;
}