首页 > 微信小程序 > 小程序开发 > 微信小程序商城开发之动态API把商品进行分类(代码)

微信小程序商城开发之动态API把商品进行分类(代码)

不言
发布: 2018-08-16 16:59:13
原创
5540 人浏览过

本篇文章给大家带来的内容是关于微信小程序商城开发之动态API把商品进行分类(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

看效果


商品分类.gif

开发计划

1、商品分类页面布局

2、调用动态API获取数据并加载

3、点击商品分类跳转相关商品集合

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

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


商品分类API.jpg

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

classify.wxml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!--主盒子-->

<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 ? &#39;active&#39; : &#39;&#39;}}" 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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

/* 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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

const ajax = require(&#39;../../utils/ajax.js&#39;);

const utils = require(&#39;../../utils/util.js&#39;);

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: &#39;GET&#39;,

      url: &#39;classify/getShopClassifyList?key=&#39; + utils.key,

      success: data => {

        that.setData({

          classifyItems: data.result

        })

        console.log(data.result)

      }

    })

  },

})

登录后复制

相关推荐:

微信小程序商城开发之动态API实现特卖商品的流式布局代码

微信小程序商城开发之动态API实现商品的详情页的代码(下)

以上是微信小程序商城开发之动态API把商品进行分类(代码)的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板