微信小程序实现图片轮播(原生)

最新推荐文章于 2024-09-27 15:55:28 发布

12程序猿

最新推荐文章于 2024-09-27 15:55:28 发布

阅读量2.4k

点赞数 2

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_26383975/article/details/107332193

版权

本文介绍了如何利用微信小程序的原生组件swiper和swiper-item来实现图片轮播功能，详细阐述了官方文档中关于这两个组件的介绍，并通过实际的index.wxml、index.js和index.wxss代码展示开发过程。

摘要由CSDN通过智能技术生成

微信小程序实现图片轮播：使用小程序原生组件swiper和swiper-item来实现。

一、官方文档中swiper和swiper-item的介绍：

Swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

Swiper-item

仅可放置在swiper组件中，宽高自动设置为100%。
在这里插入图片描述

二、开发实现

效果图

在这里插入图片描述

1.index.wxml

图片轮播

<!--pages/index/index.wxml-->
<view class="containerBox">
  <view class="swiperMain">
      <swiper  bindchange="swiperChange"
        indicator-dots="{
   {indicatorDots}}" indicator-color="{
   {indicatorColor}}" autoplay="{
   {autoplay}}" circular="{
   {circular}}" vertical="{
   {vertical}}"
        interval="{
   {interval}}" duration="{
   {duration}}" indicator-active-color="{
   {indicatorActiveColor}}">
        <block wx:for="{
   {tpList}}" wx:for-item="tpTeam" id="{
   {tpTeam.id}}" class="imgClass">
          <swiper-item>
            <image class