小程序轮播图

本文展示了微信小程序中轮播图的实现方法,包括WXML页面使用swiper组件,JS中配置自动播放、间隔时间和动画时长,以及CSS样式设置高度和宽度。通过示例代码演示了轮播图的完整用法。

作者:zhuge··预计阅读 5 分钟·597 阅读·0 评论
小程序轮播图

页面代码

<view class="container">
    <!--轮播图-->
  <swiper class="home-swiper" indicator-dots="true" autoplay="{{lb.autoplay}}" 
          interval="{{lb.interval}}" duration="{{lb.duration}}">
    <block wx:for-items="{{items}}">
      <swiper-item>
        <image src="{{item.imgurl}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>
</view>

JS代码

Page({
  data: {
    //轮播图配置
    lb:{
        autoplay: true,
        interval: 3000,
        duration: 1200,
        items:[]
        }
  },
  onLoad: function () {
    var that = this; 
    var data = {
      "datas": [
        {
          "id": 1,
          "imgurl": "../../images/a1.jpg"
        },
        {
          "id": 2,
          "imgurl": "../../images/a2.jpg"
        }
      ]
    }; 
    that.setData({
      lb.data: data.datas
    })
  }
})

样式代码 

.home-swiper {
    width: 95%;
    height: 360rpx;
}
.slide-image {
    width: 100%;
    height: 100%;
}


相关文章

评论

加载中...