夜光带你走进 微信小程序开发（十二）擅长的领域

夜光序言：

 

 

You are my eternal faith，
from beginning to end is the same crazy
你是我亘古不变的信仰
从始至终不变的是疯狂

 

 

 
 
正文：
 
                                              以道御术 / 以术识道

 

 

上图这种效果就很好~

/* 样式很重要，在这里书写 */
.container2{
   display: flex;
   flex-direction: column;
   padding: 10rpx 20rpx;
   height: 100vh
}


swiper{
   width: 100%;
   height: 370rpx;
}

swiper image{
   width: 100%;
   border-radius: 16rpx;
}

 

<!--pages/milk/milk.wxml-->
<!-- <text>精彩呈现</text> -->
<!--  首先 需要一个容器 夜光 -->
<view class="container2">
  <!-- 学过前端都知道，这种一直变换的图片组件~~ 在微信小程序开发里面稍微轻松点-->
  <swiper autoplay="true" circular>
    <swiper-item>
    <!-- 轮播，一般，我们都是放图片 -->
     <image src="/images/temp/a.png" mode="widthFix"></image>
    </swiper-item>
    <swiper-item>
    <!-- 轮播，一般，我们都是放图片 -->
     <image src="/images/temp/b.jpg" mode="widthFix"></image>
    </swiper-item>
    <swiper-item>
    <!-- 轮播，一般，我们都是放图片 -->
     <image src="/images/temp/d.jpg" mode="widthFix"></image>
    </swiper-item>
        <swiper-item>
    <!-- 轮播，一般，我们都是放图片 -->
     <image src="/images/temp/c.png" mode="widthFix"></image>
    </swiper-item>
  </swiper>
</view>

 

 

 

 

 

 

 

这里，我直接使用本地图片