微信小程序轮播组件

客官°小女子只卖身不卖艺 2021-07-24 16:01 426阅读 0赞

在index.wxml中添加以下代码

<view>
        <swiper indicator-dots="{
       {indicatorDots}}" autoplay="{
       {autoplay}}" interval="{
       {interval}}" duration="{
       {duration}}">
            <block wx:for="{
       {imgUrl}}" wx:key="index">
                <swiper-item>
                    <image src="{
       {item.url}}" class="slide-image" />
                </swiper-item>
            </block>
        </swiper>
    </view>

在index.js中添加以下代码

Page({
      data: {
        imgUrl: [
          { url: "/images.png" },
          { url: "/images.png" },
          { url: "/images.png" },
        ],
        indicatorDots: false,
        autoplay: false,
        interval: 5000,
        duration: 1000
      },
    })

###  ###

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

###  ###

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达叔小生][Link 1]的简书！ ###

**这是一个有质量，有态度的博客**

![博客][20190823074317515.jpeg]

[Link 1]: https://www.jianshu.com/u/c785ece603d1
[20190823074317515.jpeg]: https://img-blog.csdnimg.cn/20190823074317515.jpeg

发表评论取消回复

表情：

评论列表（有 0 条评论，426人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序轮播图代码

微信小程序轮播图的代码如下：首先，在小程序的 wxml 文件中，添加如下代码：  <swiper class="swiper"

深藏阁楼爱情的钟/ 2024年03月27日 12:20/ 0 赞/ 31 阅读

相关微信小程序（5）：swiper滑动轮播组件

文章目录 swiper 滑块视图容器 wiper-item 仅可放置在swiper组件中，宽高自动设置为100% 示例： index.wxml文件代码：

左手的ㄟ右手/ 2022年12月30日 14:55/ 0 赞/ 125 阅读

相关微信小程序之卡片轮播

wxml: <swiper bindchange="cardSwiper" indicator-dots="true" circular="true" au

ゝ一世哀愁。/ 2022年12月14日 13:38/ 0 赞/ 189 阅读

相关微信小程序轮播图片

轮播图片的实现使用swiper实现图片轮播功能 -------------------- 一、效果展示 ![在这里插入图片描述][20210718222522

深藏阁楼爱情的钟/ 2022年08月30日 04:12/ 0 赞/ 223 阅读

相关微信小程序实现图片轮播

![70][] wxml页面代码：  <view class='swipercontainer'> <swiper in

今天药忘吃喽~/ 2022年05月08日 09:44/ 0 赞/ 223 阅读

相关微信小程序写一个轮播图

微信小程序写轮播图，在微信开发者文档中，已经给了我们组件容器`<swiper>`，我们把需要轮播的东西放到`<swiper>`下的`<swiper-item>`中。附

Bertha 。/ 2021年12月12日 03:37/ 0 赞/ 309 阅读

相关微信小程序中的轮播图

微信小程序中的轮播图感觉是最最最最简单的了，靠swiper这个组件就可以实现。有横屏轮播图和竖屏轮播图，到时候用到了，可以直接复制代码使用 1.横屏轮播图 ![在这

￡神魔★判官ぃ/ 2021年07月27日 02:51/ 0 赞/ 575 阅读

相关微信小程序轮播图组件swiper

在官网文档->组件->视图容器查找具体内容 <swiper 滑块视图容器,其中只可放置swiper-item组件,否则会导致未定义的行为。

Love The Way You Lie/ 2021年07月24日 23:14/ 0 赞/ 526 阅读

相关微信小程序轮播组件

在index.wxml中添加以下代码 <view> <swiper indicator-dots="{ {indicatorDots}}

客官°小女子只卖身不卖艺/ 2021年07月24日 16:01/ 0 赞/ 427 阅读

相关微信小程序禁止轮播手动滑动

<swiper current="{ {tab_text}}" > <swiper-item catchtouchmove="sto

妖狐艹你老母/ 2021年07月24日 11:12/ 0 赞/ 439 阅读