Wechat applet training 2

video ：2020 Introduction to zero foundation of the latest wechat applet development + Project case 【 New visual training 】_ Bili, Bili _bilibili

Other components ：

<!--
  swiper   Slider view container 
    	indicator-dots   Indication point 
      	indicator-color  Indicate the color 
        indicator-active-color   The currently selected indicator color 
      autoplay   Auto play 
      interval   Auto switch interval 
      circular   Convergence sliding 
      vertical   Longitudinal sliding 
-->
<swiper class="box" indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" autoplay interval="3000" circular>
  <swiper-item>
    <image src="/images/2-1206131I104.jpg" mode="widthFix"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/ba468fcb-8bb2-45d3-9db4-fb401e3b023f_s.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/cb1d1e9b-3b8e-403b-b46d-e39af3e56f24.jpg"></image>
  </swiper-item>
</swiper>

<!--  Form components  -->
<!--button   Button -->
<view class="out">
  <button class="btn1" type="primary"> Sign in </button>
  <button class="btn1" type="warn"> Log out </button>
  <button class="btn1" type="primary" size="mini"> payment </button>
  <button class="btn1" type="primary" loading> Loading ...</button>
  <button  type="primary" open-type="contact"> Contact customer service </button>

  <!-- intput -->
  <form bindsubmit="onSubmit">
    <input class="ipt" placeholder=" Please enter a user name " auto-focus type="text"></input>
    <button form-type="submit"> Submit </button>
    <switch checked></switch>
  </form>

  <!-- icon -->
  <view style="padding: 50px; text-align: center;">
      <icon type="success" size="50"></icon>
      <view> Submit successfully </view>
  </view>

  <!-- progress -->
  <view style="padding: 50px;">
    <progress percent="60" show-info font-size="10" border-radius="10" active></progress>
</view>

</view>

Data binding , Conditions apply colours to a drawing

<view wx:for="{
   {10}}" wx:key="*this">{
   {index}}、 Wechat small program training 2</view>
<view wx:for="{
   {[111,222,333,444]}}"wx:key="*this">{
   {index}}、{
   {item}}</view>
<view wx:for="{
   {listArr}}"wx:key="*this">{
   {index}}、{
   {item}}</view>
<text decode>&nbsp;</text>
<view wx:for="{
   {listArr}}" wx:for-index="i" wx:for-item="content" wx:key="i">
{
   {i}}.{
   {content}}</view>
<text decode>&nbsp;</text>

<view wx:for="{
   {listobj}}" wx:key="index">
  <text>{
   {item.title}}</text> - <text>{
   {item.time}}</text>
</view>