微信小程序实现轮播图

宇宙无敌超级暴龙兽

已于 2022-03-03 13:53:42 修改

阅读量481

点赞数

分类专栏：微信小程序文章标签：微信小程序 javascript elementui

于 2022-01-16 23:07:17 首次发布

本文链接：https://blog.csdn.net/qq_59527682/article/details/122530808

版权

微信小程序专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.wxml页面。

<view class="container">
    <view class="page-body" style="width:100%; height: 500px; margin-top: -100px;">
        <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}}" style="width:100%; height: 200px;"></image>
                    </swiper-item>
                </block>
            </swiper>
        </view>
    </view>
</view>

2.在js页面写入后端

 background: ['/img/11111.webp', '/img/2222.webp', '/img/33333.webp', 'https://img1.baidu.com/it/u=3661236011,1315913336&fm=253&fmt=auto&app=138&f=JPEG?w=960&h=400'],
    indicatorDots: true,
    vertical: true,
    autoplay: true,
    interval: 2000,
    duration: 500