用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    慵懒
    2017-1-6 10:46
  • 签到天数: 2 天

    [LV.1]初来乍到

    173

    主题

    181

    帖子

    981

    金钱

    咫尺尊享

    Rank: 5Rank: 5

    积分
    0
    2017-3-17 12:49:27 柿霖不是林 咫尺尊享 楼主 31636
    [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商品组合

    • 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,内容为空,剩下的工作就是调整它的位置了。
    游客,如果您要查看本帖隐藏内容请回复

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    正需要,支持楼主大人了!
    正需要,支持楼主大人了!
    不错vbucuo 不错
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略