小程序怎么實現(xiàn)輪播圖

這篇文章主要介紹“小程序怎么實現(xiàn)輪播圖”，在日常操作中，相信很多人在小程序怎么實現(xiàn)輪播圖問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”小程序怎么實現(xiàn)輪播圖”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

使用微信提供的swiper控件，在頁面wxml中添加控件

  <view class="page-body">

    <view class="page-section page-section-spacing swiper">

      <swiper indicator-dots="{{indicatorDots}}"

        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

        <block wx:for="{{background}}" wx:key="*this">

          <swiper-item>

            <image src='{{item.url}}' class='slide-image' mode='aspectFill' ></image>

          </swiper-item>

        </block>

      </swiper>

    </view>

在wxss中設置樣式

.swiper {

 height: 400rpx;

 width: 100%;

}

.swiper image {

 height: 100%;

 width: 100%;

}

在js 中設置數(shù)據(jù)

  data: {

    background:[

      {url:'../../images/banner/banner1.jpeg'},

      { url: '../../images/banner/banner2.png' },

      { url: '../../images/banner/banner3.png' },

    ],

    indicatorDots: true,

    vertical: false,

    autoplay: true,

    interval: 2000,

    duration: 500

  },

到此，關于“小程序怎么實現(xiàn)輪播圖”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>