微信小程序demo：仿玩物志商城

柿霖不是林

[size=0.83em]

mini-program-store-index02.jpg (70.85 KB, 下载次数: 0)

下载附件

[color=rgb(153, 153, 153) !important]2017-2-14 11:53 上传

写在前面

本人是个初学者，2016年9月份开始接触编程，真正确定自学编程是10月份的事情，正好赶上微信小程序开发热潮，所以就以它为主要学习目标。

这个小作品是个人学习用，仅供学习参考！

欢迎前辈朋友给予指正问题和不足，也感谢鼓励，谢谢！

游客，如果您要查看本帖隐藏内容请回复

待完善内容：

• 动态绑定标题
• 页面内刷新内容
• 马上购物和加入购物车按钮实现：sku商品组合
  
  
  • Sku算法，Android实现，淘宝Sku实现
    
• LeanCloud 数据库更新，不合理之处修正修正
• 分类页背景颜色变化效果制作
• 最新页和最热页制作
• 购物车demo优化，逻辑层完善
• 我的页demo优化，逻辑层完善
• 新增地址页：逻辑层完善
• 代码优化：多出可以用模板的，改用模板；部分函数提取到util.js中
  

已更新内容：2017-2-14 更新日志

• READEME.md文件增加日志内容
• 优化添加地址页的 form 表单，使用伪元素和定位实现倒三角符号；
  
  

历史更新日志

微信小程序商城demo(模仿"Coolbuy玩物志"小程序)

主要思路

持续待更新中~

首页分类页分类详情页详情页详情页，加入购物车弹窗购物车我的页，我的订单我的页，地址管理新增地址样式倒三角符号实现

主要利用了伪元素和定位来完成：

这里首先定义一个view（类比html中的div），给它加上一个view叫做view-triangle，主要是用来给它自身定义背景，宽高，并且需要加上相对定位，因为它里面的三角符号需要在它的基础上进行绝对定位；

在这个view class上面加一个before或者after的伪元素，这个就是三角符号，主要利用了它的border属性，定义三个border，让border-left和border-right透明，让border-top（或border-bottom）非透明，取决于你想将这个三角符号设置成什么颜色。

最后需要给这个三角符号进行绝对定位，如果你要将它放在这个view的最下面，可以设置bottom：0，如果你要做一个导航类的三角让它在view顶部并指向某元素，可以采用负的top值进行实现，其为负的border的宽度，就可以让它和view连在一起。

同时，要设置这个伪元素宽高为0，内容为空，剩下的工作就是调整它的位置了。

游客，如果您要查看本帖隐藏内容请回复

海小小

正需要，支持楼主大人了！

admin阿达为

正需要，支持楼主大人了！

lu♥f。

不错vbucuo 不错

jack56846

我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微,信,号j i m 2 0 1 8 0 6 8 8，详聊