用小程序·云开发轻松构建二手书商城小程序（上）丨实战腾讯云开发者社区

在校园内，学生在毕业或者搬校区时，通常会将大量二手书扔掉或批发出售，十分可惜而且性价比很低。导致这种情况发生的原因，一方面是因为大部分学校内缺少靠谱、便利的交易平台，另一方面，即使校园内存在此类平台也只局限于线下。

基于此，作者开发了这款二手书交易商城小程序，以解决此场景下的二手书再利用效率低的问题。

整体功能展示：

（1）在需要涉及用户信息的部分，进行Modal提示进入，比如：游客发布、购买等

（1）此处仅展示前端部分核心代码，手机号获取涉及到解密过程，具体的请参考完整demo注册页代码

（2）目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。

常用联系方式的校检：

目前常用手机号，似乎就差10和12字段的没有了。

效果图：

发布页：

其中有几点需要注意：

（1）顶部的步骤条，随操作流程一直在变。

（2）步骤改变时，有个横向切换动画。

（3）价格设置，使用了步进器。

textarea部分：

步骤二中备注信息那里使用了层级最高的原生组件textarea，这里有个特别使用注意项：如果下面tabbar是自己写的而非使用的自带原生的tabbar，会出现穿透现象，如下图示例：

我常用的解决办法，通过动态改变textarea的聚焦状况，当点击该区域时，设置聚焦显示真实textarea，当失焦之后，展示为view层，代码如下：

上面左图是首页的进入是的静态图，右图是下滑之后的动态页面，关于全页面的样式布局方面，使用flex可以轻松搞定，我们重点说这两点：

监控屏幕滚动实现动态响应：

在上图第二张示例图中，随着页面下滑，顶部分类栏也随之置顶，下方也出现了一个返回顶部按钮，实现原理：

监控屏幕下滑高度，当大于我们设定的某个值时，元素进行渲染。

这里我们需要使用页面的一个事件处理函数：onPageScroll

（1）函数获取的是页面在垂直方向已滚动的距离（单位px），但我们页面是使用了rpx布局计算，所以后面我们乘以一个像素比（rpx/px）获取对应的rpx值.

（2）在view视图层中通过wx:if或者hidden进行控制显隐，区别在于：wx:if每次隐藏都是销毁了，而hidden只是不呈现，但依旧渲染到页面，具体的使用效果，亲自试试你就会明白的。