微信小程序初探笔记(2)

1.template模版绑定数据

<!--定制item模版-->
<template name="msgItem">
  <view class="bg_con">
    <text class="bg_item">{{index}}: {{msg}}</text>
    <text> Time: {{time}}</text>
  </view>
</template>

<import src="item.wxml" />
<block wx:for="{{itemData}}">
  <template is="msgItem" data="{{...item}}" />
</block>

data: {
    itemData: [{
      index: 0,
      msg: 'haohao come in',
      time: '2019-05-29'
    },
    {
      index: 1,
      msg: 'come in',
      time: '2019-05-29'
    },{
      index: 2,
      msg: 'haohao',
      time: '2019-05-29'
    }],

定制模版就相当与Android内的组合 自定义View

---

2.wxss主要属性

• flex-direction row：横向排列 column：纵向排列
• justify-content 主轴的对齐方式；如果flex-direction为row则主轴就是水平方向；可选属性 (‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)
• align-items 侧轴对齐方式如果flex-direction为row则侧轴就是垂直方向）；可选属性 (‘flex-start’, ‘flex-end’, ‘center’）
• margin 外边距
• padding 内边距

---

3.小程序中 let、var、const

• let 声明块级变量，即局部变量。example：在for循环中声明的，跳出for循环就不能使用
• var 声明全局变量。example：在for循环中声明的，跳出for循环依然可以使用
• const 声明常量/块级变量。如果在for循环中声明的，跳出不能使用

---

4.function (e) 关于e自定义事件

<view  bindtap='test' data-type="0" data-sssq="haohao">

test: function (e) {
var type = e.currentTarget.dataset.type;
var sssq = e.currentTarget.dataset.sssq;
}

---

5.e.currentTarget和e.target

• currentTarget ：在view上绑定的bindtap的组件
• target ：响应事件的组件

一般出现在父子view上，如果俩个共同用一般用于处理各自不同的逻辑

---

6. 需要多嵌套一层才能设置距离成功

<view style='width:100%;display:flex;margin-top:140rpx'>
    <view class='blue_bg row_container row_center' wx:if="{{sToday}}" style='margin:30rpx'>
      <text style='color:white;font-size:100rpx'>120</text>

    </view>