微信小程序------轮播图------纵向轮播图

页面结构

<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots autoplay interval="3500" duration="1000"  vertical circular> 
  <swiper-item wx:for="{{imgUrls}}" wx:key="*this">
    <image src="{{item}}" mode="aspectFill" />
  </swiper-item>
</swiper>

css样式

swiper{
  height: 100vh;
}
image{
  width: 100vw;
  height: 100vh;
}

js样式

  data: {
    imgUrls:[
      '/pages/images/1.png','/pages/images/2.png','/pages/images/test.png'
    ]
  },

  样式图

 

 

posted on 2024-05-28 18:34  昨夜小楼听风雨  阅读(39)  评论(0编辑  收藏  举报