小程序轮播

r囧r小猫 2022-03-19 10:20 223阅读 0赞

效果图：  
![在这里插入图片描述][2019021615131146.png]  
test.wxss

.swiperAll {
      width: 100%;
      overflow: visible;
      height: 380rpx;
    }
    
    .swiperItem {
      box-sizing: border-box;
      border-radius: 20rpx;
      padding: 0 48rpx;
    }
    
    .slide-image {
      margin-top: 2%;
      width: 100%;
      height: 92%;
      border-radius: 20rpx;
      box-shadow: 0rpx 5rpx 10rpx gray;
    }

test.wxml

<swiper class='swiperAll' indicator-dots="{
       {false}}" indicator-dots="ture" autoplay="{
       {true}}" interval="3000" duration="500">
      <block wx:for="{
       {imgUrls}}">
        <swiper-item class="swiperItem">
          <image src="{
       {item}}" class="slide-image" mode="aspectFill" />
        </swiper-item>
      </block>
    </swiper>

test.js

/**
       * 页面的初始数据
       */
      data: {
        imgUrls: [
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544191278&di=fcd8162dcfae6a5d51b58d3898171430&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1206%2F25%2Fc1%2F12117095_1340608785366.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543596525967&di=9fa30cfaad9176d151b1526b19922d62&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201510%2F22%2F20151022170822_4UAtC.jpeg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543596485698&di=c96dc0e6c7bec1c1ca727c678fd6b40c&imgtype=0&src=http%3A%2F%2Fimg-download.pchome.net%2Fdownload%2F1k1%2F5y%2F4b%2Foh6u45-tp2.jpg'
        ],
      },

[2019021615131146.png]: https://img-blog.csdnimg.cn/2019021615131146.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 mpvue小程序功能：轮播图

mpvue小程序功能：轮播图结构  <div class="swiper"> <swiper

我会带着你远行/ 2023年02月21日 09:19/ 0 赞/ 1 阅读

相关微信小程序：轮播图

> 基础知识： > > swiper标签存在默认的宽度和高度：100% \ 150px > > `swiper` 高度无法实现由内容撑开 > > 先找出来

我不是女神ヾ/ 2023年02月19日 10:25/ 0 赞/ 13 阅读

相关小程序轮播

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMy

淡淡的烟草味﹌/ 2022年12月28日 14:24/ 0 赞/ 153 阅读

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

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

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

相关微信小程序轮播图片

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

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

相关小程序轮播指示点手动实现

由于原生的点限制太多，这里展示下，手动自己实现指示点 html  <swiper class='banner-top' indicator

灰太狼/ 2022年05月15日 10:29/ 0 赞/ 269 阅读

相关小程序轮播

效果图： ![在这里插入图片描述][2019021615131146.png] test.wxss .swiperAll { width: 100

r囧r小猫/ 2022年03月19日 10:20/ 0 赞/ 224 阅读

相关小程序轮播图

方法一： js代码 Page({ data: { //轮播图配置 autoplay: t

傷城~/ 2021年08月14日 00:13/ 0 赞/ 465 阅读

相关微信小程序轮播组件

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

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