微信小程序学习之轮播图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%;
}

好了,看效果

轮播图

相关推荐
71-312 分钟前
C语言速成秘籍——跳转语句(goto)
c语言·笔记·学习·其他
蓝桉_An1 小时前
CNN基础学习(自用)
神经网络·学习
黑客思维者2 小时前
Notepad++中高危DLL劫持漏洞深度剖析
notepad++·漏洞·dll劫持
Han.miracle2 小时前
数据结构——二叉树学习
数据结构·学习
Demoncode_y3 小时前
Vue3中基于路由的动态递归菜单组件实现
前端·javascript·vue.js·学习·递归·菜单组件
HalvmånEver3 小时前
初学者入门 C++ map 容器:从基础用法到实战案例
开发语言·c++·学习·map
能不能别报错3 小时前
K8s学习笔记(十) Deployment 副本控制器
笔记·学习·kubernetes
Miki Makimura4 小时前
基于网络io的多线程TCP服务器
网络·c++·学习
丰锋ff4 小时前
2014 年真题配套词汇单词笔记(考研真相)
学习·考研
RaLi和夕4 小时前
嵌入式学习笔记4.STM32中断系统及外部中断EXTI
笔记·stm32·单片机·学习