4.小程序代码备份

1.block不是一个组件，它是一个包裹性质的容易，，不会在页面中做任何渲染，一次性控制几个VIEW，避免出现不必要的节点

结合if和for使用，用来包裹多个组件

	<block wx:for="{{index_slides}}" wx:key="{{index}}">
				<swiper-item>
					<image src="{{item.slide_url}}" mode="widthFix" class="slide-image" data-id="{{item.id}}" />
				</swiper-item>
			</block>

1.小程序IF条件

<view wx:if="{{ a > 5 }}">6</view>
<view wx:elif="{{ a < 5 }}">4</view>
<view wx:else>5</view>

1.获取文本框输入事件

wxml

<input type="text" bindinput="bind"/>

js

bind(e){
    console.log(e.detail.value);
  }

1.跳转（携带参数）+点击事件bindtap

1.1自定义参数

 <view class='grid_item' bindtap="bindViewTap" data-id="{{language[index]}}" >
    <image src="../../photo/banner.jpg"></image>
    <text>   {{item}}</text>
     
 </view>

1.2跳转

bindViewTap(e) {
   
    // console.log( e.currentTarget.dataset.id);
    wx.redirectTo({
      url: '../logs/logs?id='+ e.currentTarget.dataset.id,
     
    })
 
  },

1.3获取参数

​​​​​​​ onLoad(e) {
  console.log(  e.id);
  }

2.田字格

2.1 wxml

<view class="grid">
  <block wx:for="{{language}}" wx:key="index">
    <view class='grid_item' bindtap="bindViewTap" data-id="{{language[index]}}" >
    <image src="../../photo/banner.jpg"></image>
    <text>   {{item}}</text>
     
 </view> 
  </block>
</view>

2.2 wxcss

.grid{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

}
.grid_item{
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 150rpx;
  flex:20%;
  
}
.grid_item image{
  height: 50rpx;
  width: 50rpx;
   
}
.grid_item text{
  margin-top: 10rpx;
}

2.3 js

 data: {
    duration:30,
    language:[
      "Java",
      "C",
      "C++",
      "Python",
      ".NET",
      "C#",
      "JavaScript", 
      "SQL",
      "PHP",
      "PHP2"
    ]}

3.轮播图

3.1 wxml

	<!-- 首页轮播图 -->
	<view class="section section-swiper">
		<swiper class="slide" indicator-dots="{{indicator_dots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
			<block wx:for="{{index_slides}}" wx:key="{{index}}">
				<swiper-item>
					<image src="{{item.slide_url}}" mode="widthFix" class="slide-image" data-id="{{item.id}}" />
				</swiper-item>
			</block>
		</swiper>
	</view><!-- end-section section-swiper -->

3.2 wxss

.section-swiper .slide{
  width: 100%;
  height: 380rpx;
}
.section-swiper .slide-image{
  width: 100%;
  display: block;
}

3.3 js

  data: {
    index_slides:[],
    indicator_dots:true,
    autoplay:true,
    interval:2000,
    duration:1000,
    nav_data:[],
    index_activity:[],
    index_block:[],
    isTap:false,
    isLoading:false
  }

4.设置数据

   this.setData({
      isTap:true
    });

5.数组转换成json对象

 console.log(JSON.stringify(e) );