微信小程序详细制作1

2024年9月18日

16:11

<view class="container">

  <view>A</view>

  <view>B</view>

  <view>C</view>

</view>

.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;

}

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

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

  <view>A</view>

  <view>B</view>

  <view>C</view>

</scroll-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{

  border: 1px solid red;

  width: 100px;

  height: 120px;

}

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

<swiper class="swiper-container">

  <!-- 第一个轮播图 -->

  <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>

/* pages/list/list.wxss */

.swiper-container{

  height: 150px;

}

.item{

  height: 100%;

  line-height: 150px;

  text-align: center;

}

swiper-item:nth-child(1).item{

  background-color: lightseagreen;

}

swiper-item:nth-child(2).item{

  background-color: lightskyblue;

}

swiper-item:nth-child(3).item{

  background-color: lightpink;

}

<view>

  手机号支持长按选中效果

  <text selectable>15133703021</text>

</view>

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

<!-- type属性指定按钮颜色类型 -->

<button>普通按钮</button>

<button type="primary">主色调按钮</button>

<button type="warn">警告按钮</button>

<!-- size="mini" 小尺寸按钮 -->

<button size="mini">普通按钮</button>

<button type="primary" size="mini">主色调按钮</button>

<button type="warn" size="mini">警告按钮</button>

<!-- plain镂空按钮 -->

<button size="mini" plain>普通按钮</button>

<button type="primary" size="mini" plain>主色调按钮</button>

<button type="warn" size="mini" plain>警告按钮</button>