cyh1989 / mini-program-store

微信小程序,demo模仿玩物志

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

写在前面

这个小作品是个人学习用,仅供学习参考!

github地址:https://github.com/iamsongpeng/mini-program-store

待完善内容:

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

已更新内容:

2017-2-14 更新日志

  1. READEME.md文件增加日志内容
  2. 优化添加地址页的 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,内容为空,剩下的工作就是调整它的位置了。

原文:《使用html+css实现三角标示符号》

About

微信小程序,demo模仿玩物志


Languages

Language:JavaScript 100.0%