小程序基本布局

包括小程序的基本布局wxml<pre class="brush:xml;toolbar:false"><swiper class="swiper1" indicator-dots autoplay interval="2000" circular="">

  <swiper-item>
    <view>A</view>
  </swiper-item>
  <swiper-item>
    <view>B</view>
  </swiper-item>
  <swiper-item>
    <view>C</view>
  </swiper-item>
  </swiper>
  <view style="height: 10px;"></view>
  
  <view class="container1">
    <view>A</view>
    <view>B</view>
    <view>C</view>
  </view>
  <view style="height: 10px;"></view>
  
  <scroll-view class="y-scroll" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
  </scroll-view></pre>wxss<pre class="brush:css;toolbar:false">.swiper1
{
  height: 20vh;
}
swiper-item view{
  height: 100%;
  line-height: 20vh;
  text-align: center;
}
swiper-item:nth-child(1)
{
  background-color: lightblue;
}
swiper-item:nth-child(2)
{
  background-color:lightgreen;
}
swiper-item:nth-child(3)
{
  background-color:lightpink;
}
.container1
{
  display: flex;
  justify-content: space-around;
}
.container1 view
{
  width: 30vw;
  height: 10vh;
  text-align: center;
  line-height: 10vh;
}
.container1 view:nth-child(1)
{
  background-color: lightblue;
}
.container1 view:nth-child(2)
{
  background-color:lightgreen;
}
.container1 view:nth-child(3)
{
  background-color:lightpink;
}
.y-scroll
{
  border: 1px solid gray;
  width: 30vw;
  height: 50vh;
}
.y-scroll view{
  width: 30vw;
  height: 30vh;
  text-align: center;
  line-height: 30vh;
}
.y-scroll view:nth-child(1)
{
  background-color: lightblue;
}
.y-scroll view:nth-child(2)
{
  background-color:lightgreen;
}
.y-scroll view:nth-child(3)
{
  background-color:lightpink;
}</pre>

小程序基本布局

添加新评论

关于博主

文章分类

最受欢迎的文章

最近回复

其它