微信小程序之滚动图片

时间:2024-02-23 10:13:34

1.用到的API

 

2.wxml

 

<view>
  <swiper class="swiper" autoplay="true" interval="2000" >
    <swiper-item>
      <image src="/images/post/xiaolong.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/post/vr.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/post/sls.jpg"></image>
    </swiper-item>

  </swiper>

</view>

  

3.wxss

/* pages/posts/post.wxss */
swiper {

width: 100%;
height: 600rpx;
}
swiper image{
width: 100%;
height: 600rpx;

}

  

4.设置路径

{
  "pages": [
    "pages/posts/post",
    "pages/welcome/welcome"
    
   
  ],
  "window": {
    "navigationBarBackgroundColor": "#b3d4db"
}
}