小程序开发

<!--pages/list/list.wxml-->

<scroll-view class="container1" scroll-y>

<view>A</view>

<view>B</view>

<view>C</view>

</scroll-view>

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000" circular>

  <swiper-item>

    <view class="item">A</view>

  </swiper-item>

  <swiper-item>

    <view class="item">B</view>

  </swiper-item>

  <swiper-item>

    <view class="item">C</view>

  </swiper-item>

</swiper>

<view>

  <text selectable>12345678911</text>

</view>

<rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>

<button></button>

<button type="primary"></button>

<button type="warn"></button>

<view>{{info}}</view>

<view>{{randomNum1>=5 ? '>=5':'<5'}}</view>

<view>{{randomNum2*100}}</view>

===========================================================

/* pages/list/list.wxss */

.container1 view{

  width: 100px;

  height: 100px;

  text-align: center;

  line-height: 100px;

}

.container1 view:nth-child(1){

  background-color: lightgreen;

}

.container1 view:nth-child(2){

  background-color: lightskyblue;

}

.container1 view:nth-child(3){

  background-color: lightpink;

}

/* .container1{

  display: flex;

  justify-content: space-around;

} */

.container1{

  border: 1px solid red;

  width: 100px;

  height: 120px;

}

.swiper-container{

  height: 150px;

}

.item{

  height: 100%;

  line-height: 150px;

  text-align: center;

}

swiper-item:nth-child(1){

  background-color: lightgreen;

}

swiper-item:nth-child(2){

  background-color: lightskyblue;

}

swiper-item:nth-child(3){

  background-color: lightpink;

}

=======================================================

// pages/list/list.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

    info:'hello world',

    randomNum1:Math.random()*10,

    randomNum2:Math.random().toFixed(2)

  },