微信小程序实现图片轮播

最新推荐文章于 2024-10-23 22:28:17 发布

原创

最新推荐文章于 2024-10-23 22:28:17 发布 · 3.7k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #微信小程序图片轮播 #微信小程序滑块视图容器

本文介绍了如何在微信小程序中实现图片轮播功能，包括wxml、js和wxss的相关代码实现，并提供了详细的微信官方文档链接以供深入学习。

wxml页面代码：

<!--图片轮播 -->
<view class='swipercontainer'>
  <swiper indicator-dots="{
  
  {indicatorDots}}" autoplay="{
  
  {autoplay}}" interval="{
  
  {interval}}" duration="{
  
  {duration}}" vertical='{
  
  {vertical}}' circular='{
  
  {circular}}'>
    <block wx:for="{
  
  {imgUrls}}">
      <swiper-item>
        <image src="{
  
  {item}}" class="slide-image swipimg"/>
      </swiper-item>
    </block>
  </swiper>
</view>

js页面代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      ' ../../images/fl01.png',
      ' ../../images/fl02.png',
      ' ../../images/fl03.png'
    ],
    indicatorDots: true, //	是否显示面板指示点
    autoplay: true, //