微信小程序分类及详情信息模块的分析-微信小程序分为几种类型-小程序界面开发-即速应用

微信小程序分类及详情信息模块的分析-微信小程序分为几种类型-小程序界面开发

浏览量：1751 时间：2020-04-06 来源：丶枕边人

发完代码我才想起来，我的思路还没有发上来呢。首先，需要实现的功能是：1.
1.点击下面分类图标界面，最顶部有个分类，会进入分类。分为左右侧栏。2.左边显示书类型的分类，点击并展开右侧栏类型书籍（有图片，书名）。3.点击书籍就会跳进书籍详细信息4.最顶部有个导航栏，一张此书的图片，大概百分之40左右。5.接着就是书名，金额，作者，热量等等内容显示。6.可以选择书的数量，可以评价此本书或者此次购买。7.下面就是书本详情介绍，有书的简介，底部有这本书的一些不同角度的图片。8.最后，右边有个图标，表示可以收藏这本书，点击会跳出收藏成功，在右边就是加入购物车，把这本书或者这本书的数量规格，加入到购物车中，最右边是一个立即购买，表示点击进入到购物车结算。
2.
基本的需要实现的功能都在上门了，先实现静态的看了然后在验证和测试界面的所有功能，才能更好的修改。
3.
具体实现：我定义的分类名为：classify，书籍详细信息类名为：detail。
4.
1.第一个实现的是，进入分类界面，顶部所展现的名字，在json配置文件里，
5.
2.输入navigationBarTitleText：分类。然后编译，顶部就显示分类了。接着，在JS脚本逻辑文件里，定义了id，书籍的类型，有无子类或者说是二级元素，有的话，给二级元素定义id，，书的名字为什么，书的图片在哪儿，是什么；如果没有二级元素的话，则显示该类型没有书籍信息。然后，接着定义一个id和index（下标），id是从1开始的，index是从0开始的。
6.
3.定义一个事件处理函数，获取item（项目）项的id和数组的下标值，接着，把点击到某一处，设置为当前的index，下面就放的数据了。还有index和id。
7.
4.把逻辑理清后，到了WXML模板文件，定义需要装订的整个类，然后是左边侧栏，定义之后，在for循环的array中item的变量包起来获取，当前项的id等于item项的id，用data-index（获取编号）记录这个数据在数组的下标位置，使用data-id设置每个item的id值，在定义左边侧栏的item项获取状态，用三目符分为几种状态。
8.
5.定义右边侧栏，如果有数据的话，就遍历显示所有一级，二级元素下的所有信息，然后，分为item状态点击图片和文本来界面跳转到书的位置，。如果没有数据的话，就显示该分类暂无数据。
9.
6.做完这些后，就该进入WXSS样式文件里来修改需要达到的样式了，由于前面定义了所有需要改变样式的方法，直接调用就可以了。修改整个装订的背景颜色。左右侧栏的位置，高低，长宽，颜色，边框，还有内块级元素，样式垂直，下边框的样式，文字的样式，左边侧栏item被选中的时的样式，右边侧栏定义为为盒状模型提供最大的灵活性，还有两个并排的带边框的框，右边侧栏的浮动向左，文本的水平对齐。最后还有没有数据所显示的样式。
10.
7.最顶部会显示书本详情，下面跟着实现轮播图效果，书的图片在上面播放。设定自动切换，轮播时间，滑动时长。图片的左下角会显示书名，金额，作者，销量和余量。
11.
8.点击图片可以预览，放大图片。下面有个选择栏可以选择所需要购买的规格，数量。买了或者没买都可以评论此次看书或者买书的感受。
12.
9.底部悬浮栏的话，有3个东西划分开来，依次是收藏，添加到购物车和立即购买。点击点击收藏，就会收藏这本书。以至于下次继续购买，点击添加到购物车的话，就会把书添加到购物车里，用户可以不跳转过去继续在原地继续选择书籍的观看和购买，（第一种立即购买）立即购买的话，就会跳转到结算界面或者购物车界面里去结算此次购买的所有书籍。
13.
（第二种立即购买）点击立即购买，会自动查询是否登录，已登录就跳转到订单里去，未登录的话会跳转到登录界面进行登录。