用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

1

主题

12

帖子

160

积分

架构狮

Rank: 3Rank: 3

积分
160
2017-2-14 11:49:45 wx_fc33abe917开发者认证 架构狮 楼主 610154
mini-program-store-index02.jpg

写在前面
本人是个初学者,2016年9月份开始接触编程,真正确定自学编程是10月份的事情,正好赶上微信小程序开发热潮,所以就以它为主要学习目标。
这个小作品是个人学习用,仅供学习参考!
欢迎前辈朋友给予指正问题和不足,也感谢鼓励,谢谢!

待完善内容:
  • 动态绑定标题
  • 页面内刷新内容
  • 马上购物和加入购物车按钮实现:sku商品组合

  • LeanCloud 数据库更新,不合理之处修正修正
  • 分类页背景颜色变化效果制作
  • 最新页和最热页制作
  • 购物车demo优化,逻辑层完善
  • 我的页demo优化,逻辑层完善
  • 新增地址页:逻辑层完善
  • 代码优化:多出可以用模板的,改用模板;部分函数提取到util.js中


已更新内容:2017-2-14 更新日志
  • READEME.md文件增加日志内容
  • 优化添加地址页的 form 表单,使用伪元素和定位实现倒三角符号;



历史更新日志
微信小程序商城demo(模仿"Coolbuy玩物志"小程序)
mini-program-store-index.png
mini-program-store-classify.png
mini-program-store-classifydetail.png
mini-program-store-detail.png
mini-program-store-to-cart.png
mini-program-store-cart.png
mini-program-store-order.png
mini-program-store-address.png
mini-program-store-add-address01.png

主要思路
持续待更新中~

首页分类页分类详情页详情页详情页,加入购物车弹窗购物车我的页,我的订单我的页,地址管理新增地址样式倒三角符号实现
主要利用了伪元素和定位来完成:

这里首先定义一个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,内容为空,剩下的工作就是调整它的位置了。

评分

参与人数 2原创 +1 浮云 +21 收起 理由
mcx + 1 很给力!
天下雪 + 1 + 20 很给力!

查看全部评分

天下雪 发表于 2017-2-14 12:05
那么必须支持了,昨天看到这个作品后,觉得潜力不小,真正完善,估计会是一个十分精品的demo
我其 ...

怎么下载呢
是楼主的作品吗
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。

是的,逻辑层好多还没有实现,继续加油
wx_fc33abe917 发表于 2017-2-14 12:01
是的,逻辑层好多还没有实现,继续加油

那么必须支持了,昨天看到这个作品后,觉得潜力不小,真正完善,估计会是一个十分精品的demo
我其实昨天看到后,就在开发工具上测试了一下,但是真机没测试,我真机也测试一下看看

新版本的开发工具上传似乎有问题,我点了压缩代码,就根本传不动,看来不能点压缩代码

真机测试了一下,没啥问题,现在就是很多逻辑没实现,界面已经实现了一半以上了
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
视图层做的不错,看看构架
2017-4-15 17:55:45 zeelib 攻城狮
6#
666
发新帖
您需要登录后才可以回帖 登录 | 立即注册