小程序笔记(1)

1.在小程序中居中

   display: flex;
   justify-content: center;

2.使用弹性布局（默认是横向布局）

/* 父标签 */
.after {
  /* 设置为弹性布局 */
  display: flex;
  /* 内容居中 */
  justify-content: center;
  /* 设置为竖向布局 */
  flex-direction: row;
}

/* 子标签 */
.afterItem {
  display: flex;
  /* 列布局，也就是横向 */

}

3.小程序中的分割线

<view class="viewLine"></view>

/*分割线样式*/
.viewLine {
  background: #98aa98;
  width: 100%;
  height: 2rpx;

}

4.Data中的数据的读写

1. 往Data中写入数据

   // 当Data数据中的数据名称是result时 
   this.setData({
         result:result
   })
   

   // 当Data数据中的数据名不确定事,要使用[变量名],来获取到变量的值
   let dataName=e.currentTarget.dataset.name;
   this.setData({
         [dataName]:value,
         result:-1
   })
   

2. 读取Data中的数据

   • 在js函数中中读取

   this.data[dataName]
   

   • 在wxml页面读取

   <!-- 可以使用{{变量名}}获取,以下是使用循环来获取-->
   <view wx:for="{{array}}"  wx:key="*this">{{item}}</view>
   

   • 在{{}}中可以比较,判断

   <view wx:if="{{result!=-1}}">
   	<view wx:if="{{result==0}}">{{num_1}}={{num_2}}</view>
   	<view wx:if="{{result==1}}">{{num_1}}>{{num_2}}</view>
   	<view wx:if="{{result==2}}">{{num_2}}>{{num_1}}</view>
   </view>
   

   • 使用this.setData({})对Data中的数据进行赋值之后,{{}}里面的数据是会动态的改变

   <!-- 当result不是-1的时候,这个标签就会显示了,可以理解为每一次使用this.setData({})之后都会判断一次-->
   <view wx:if="{{result!=-1}}">标签内的内容</view>