微信小程序微商城(七):动态API实现商品分类

喜欢吃鱼的青年 2018-07-10 15:40:43 ⋅ 172 阅读




上一篇:微信小程序微商城(六):动态API实现新品特卖商品流式布局

看效果


开发计划

1、商品分类页面布局
2、调用动态API获取数据并加载
3、点击商品分类跳转相关商品集合

根据商品ID获取商品详情API数据模型

访问:https://100boot.cn/ 选择微商城案例,如下图所示:


下方还有详细的数据模型可以查看哦!

classify.wxml

<!--主盒子-->
<view class="container">  <!--左侧栏-->  <view class="nav_left">    <block wx:for="{{classifyItems}}">      <!--当前项的id等于item项的id,那个就是当前状态-->      <!--用data-index记录这个数据在数组的下标位置,使用data-id设置每个item的id值,供打开2级页面使用-->      <view class="nav_left_items {{curNav == item.id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}">          {{item.name}}        
   </view>    </block>  </view>  <!--右侧栏-->  <view class="nav_right">    <!--如果有数据,才遍历项-->    <view wx:if="{{classifyItems[curIndex].ishaveChild}}">      <block wx:for="{{classifyItems[curIndex].shopClassifyDtoList}}">        <view class="nav_right_items">        <!--界面跳转 -->          <navigator url="/pages/classifyGoods/classifyGoods?classifyId={{item.id}}">            <image src="{{item.imgUrl}}"></image>            <text>{{item.name}}</text>          </navigator>        </view>      </block>    </view>    <!--如果无数据,则显示数据-->    <view class="nodata_text" wx:else>该分类暂无数据</view>  </view></view>

classify.wxss

/* pages/classify/classify.wxss */

page{    background: #f5f5f5;   }  /*总体主盒子*/  .container {    position: relative;    width: 100%;    height: 100%;    background-color: #fff;    color: #939393;   } /*左侧栏主盒子*/  .nav_left{    /*设置行内块级元素*/    position: absolute;    /* display: inline-block;     */  width: 25%;    height: 100%;    /*主盒子设置背景色为灰色*/    background: #f5f5f5;    text-align: center;    left: 0;  top:0; }  /*左侧栏list的item*/  
.nav_left .nav_left_items{      height: 40px;     line-height: 40px;     padding: 6px 0;     border-bottom: 1px solid #dedede;     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;   }
.left_cate {  
 display: flex;    flex-direction: row;    /*每个高30px*/    height: 40px;    /*垂直居中*/    line-height: 40px;    /*再设上下padding增加高度,总高42px*/    padding: 6px 0;    /*只设下边线*/    border-bottom: 1px solid #dedede;    /*文字14px*/    font-size: 14px;  background: #fff;    color: #f0145a; }
.separate {  
 background-color: #f0145a;  
 width: 10rpx;  
 z-index: 10; }

classify.js

const ajax = require('../../utils/ajax.js');
const utils = require('../../utils/util.js'); Page({  /**   * 页面的初始数据   */  data: {    
   classifyItems:[],    
   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) {    
   var that = this;    that.classifyShow();  },  
classifyShow: function (success) {    
   var that = this;    ajax.request({      
       method: 'GET',      
       url: 'classify/getShopClassifyList?key=' + utils.key,      
       success: data => {        that.setData({          
           classifyItems: data.result        })        
       console.log(data.result)      }    })  }, })

备注

微信小程序微商城系列 都是通过https 动态获取数据并展示的,建议从第一篇开始阅读。大家多多支持本系列文章会继续更新下去,谢谢各位!大家在使用过程中有哪些建议可以提出来,我们一起学习哈~~~

微信小程序微商城系列

微信小程序微商城:开发者key获取
微信小程序微商城(一):https框架搭建并实现导航功能
微信小程序微商城(二):电商首页轮播、分类导航和新品特卖实现
微信小程序微商城(三):电商首页福利专场无限下拉刷新动态API数据实现
微信小程序微商城(四):动态API实现商品详情页(上)
微信小程序微商城(五):动态API实现商品详情页(下)
微信小程序微商城(六):动态API实现新品特卖商品流式布局

关注我们

如果需要源码可以关注“IT实战联盟”公众号并留言(微商城源码,5个字会收到源码下载地址,一定要看源码里面的操作手册会少走很多弯路),也可以加入交流群和作者互撩哦~~~


全部评论: 0

    我有话说:

    程序商城(四):动态API实现商品详情页(上)

    1、实现商品详情页面布局(这篇实现3个模块,头部商品图片轮播、商品价格和商品描述、商品详情展示) 2、根据用户点击不同的商品请求API动态加载数据

    程序商城(六):动态API实现新品特卖商品流式布局

    实现新品特卖商品列表布局、调用动态API获取数据并加载和点击商品跳转商品详情

    程序商城(五):动态API实现商品详情页(下)

    加入购物车悬浮框、商品数量、价格计算、收藏和加入购物车功能开发

    程序实现商品数量加减

    这是一个用程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用

    程序商城(九):授权并实现个人中心页面页面

    实现商城授权并获取用户信息和个人中心页面布局

    程序电商实战-商品列表流式布局

    今天给大家分享一下程序商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~

    程序电商实战-商品详情(上)

    先看一下今天要实现程序商品详情页吧!

    程序商城(八):缓存实现商品购物车功能

    商品详情页将商品信息放入缓存,购物车页面读取缓存获取商品信息,购物车商品计算和删除缓存商品

    程序实战篇:商品属性联动选择(案例)

    本期的程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序商城(三):电商首页福利专场无限下拉刷新动态API数据实现

    电商首页第5个模块-福利专场,通过https调用API数据模型来实现无限下拉刷新......

    程序商城(二):电商首页轮播、分类导航和新品特卖实现

    本案例所有模块都为https动态调用API数据服务获得

    程序商城(一):https框架搭建并实现导航功能

    本文将带领大家搭建https的程序框架,并实现动态获取数据展示效果!

    程序-template使用:实现购物车商品数量加减功能

    上一篇我们实现了购物车功能,里面有用到template模板功能来实现购物车商品数量加减和价格计算功能......

    程序-Image的widthFix属性和rpm尺寸的使用

    在做程序商品详情页,商品的详情是图片集合,渲染完成后发现图片加载的很不自然

    程序电商实战-商品详情加入购物车(下)

    今天会接着上一篇开始写商品详情页加入购物车的部分,直接看效果......

    程序电商实战-首页(上)

    上一篇:程序电商实战-入门篇 嗨,大家好!经过近两周的精心准备终于开始程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!   首页效果图

    程序抖音实战-首页(上)

    你也可以用程序编写一个抖音

    程序电商实战-首页(下)

    上一篇:程序电商实战-首页(上)好了,上一期我们把首页搜索、导航栏和广告轮播给做完了,那么接下来会继续