微信小程序

<view>

默认值是true,显示组件,但是 hidden={{iscart}},则其真值与iscart绑定,一旦cart不存在,iscart = flase(其初始值),则hidden将组件隐藏

列表渲染

在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

相当于一个循环


 

使得其中的货物每一个都变成块级元素

弹性盒子flexbox

  • display:flex 水平自动均匀布局
    https://www.jianshu.com/p/f82262002f8a
    https://segmentfault.com/a/1190000004139009

主轴为水平方向,起点在左端。

  • justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
    justify-content: center;
    center : 项目位于容器的中心。
    http://www.runoob.com/cssref/css3-pr-justify-content.html
  • flex-direction: column;
    http://www.runoob.com/cssref/css3-pr-flex-direction.html

column:主轴为垂直方向,起点在上沿。灵活的项目将垂直显示,正如一个列一样。

 

nowrap(默认):不换行。

 

网格布局

最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放。

flex:1   –>  让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容:

未细看的参考

页面跳转

wxml

 

js

个性化弹出框

 

数据绑定

OnLoad function (options){}

  • 多个样式表要用逗号隔开
  • onShow: function(){}

  • 通过 console.log(e) 可以打印任何东西
  • 待解决问题:
  1. 结算结果是负数
  2. 总价栏定位在导航栏下面
  3. 选择数量及删除的那一条不应该与文本对齐(紧跟)而是应该相对下面,与总价栏设计相似