微信小程序学习之轮播图swiper

轮播图是小程序的重要组件,我们还是好好学滴。

1、上代码,直接布局一个轮播图组件(index.wxml):

复制代码
<swiper class="swiper" indicator-active-color="#fa2c19" indicator-color="#fff" duration="{{duration}}" circular="{{circular}}" autoplay="{{autoplay}}" interval="{{interval}}" indicator-dots="{{indicatorDot}}">
      <swiper-item>
        <image src="https://inews.gtimg.com/news_ls/OAyGfj8q_u9hvn_h8InVmiTqjNaqzwZphygTCTwfhxYvgAA_870492/0" mode="widthFix"/>
      </swiper-item>
      <swiper-item>
        <image src="https://inews.gtimg.com/news_ls/OPxz8FA21MwfVH3gNlRBe2Ps1puF7j9PNdnSZ-LT3F5RgAA_870492/0" mode="widthFix"/>
      </swiper-item>
      <swiper-item>
        <image src="https://inews.gtimg.com/news_ls/OUkUW052LsZR4SEK19nU9fQqkJrLroMkYsPXR9p4LcTB8AA_870492/0" mode="widthFix"/>
      </swiper-item>
    </swiper>

2、轮播图属性的讲解:

indicator-active-color 当前播放页下面指示点的颜色

indicator-color 轮播图下面对应点的颜色

duration 图片切换时动画的播放时间

autoplay 自动切换

circular 采用衔接滑动

interval 切换时间间隔

indicator-dots 显示面板指示点

3、属性的赋值(index.js)

复制代码
Page({
  data: {
    value:'',
    indicatorDot:true,
    autoplay:true,
    interval:3000,
    circular:true,
    duration:1000,
  },
  
})

4、相关样式(index.wxss)

复制代码
.swiper{
  padding: 0 10rpx;
}

image{
  width: 100%;
}

好了,看效果

轮播图

相关推荐
不太可爱的叶某人5 小时前
【学习笔记】MySQL技术内幕InnoDB存储引擎——第5章 索引与算法
笔记·学习·mysql
岁岁岁平安5 小时前
Redis基础学习(五大值数据类型的常用操作命令)
数据库·redis·学习·redis list·redis hash·redis set·redis string
知识分享小能手7 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
pay4fun8 小时前
2048-控制台版本
c++·学习
知识分享小能手9 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
铲子Zzz9 小时前
Java使用接口AES进行加密+微信小程序接收解密
java·开发语言·微信小程序
weixin_4188138710 小时前
Python-可视化学习笔记
笔记·python·学习
Haoea!10 小时前
Flink-05学习 接上节,将FlinkJedisPoolConfig 从Kafka写入Redis
学习·flink·kafka
丁满与彭彭11 小时前
嵌入式学习笔记-MCU阶段-DAY01
笔记·单片机·学习
呼啦啦--隔壁老王11 小时前
dexopt学习待整理
学习