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

好了,看效果

轮播图

相关推荐
电子云与长程纠缠4 小时前
Blender入门学习06 - 粒子
学习·blender·1024程序员节
综合热讯4 小时前
湖南粒界教育科技有限公司:专注影视职业教育,AI辅助教学提升学习实效
人工智能·科技·学习
冬夜戏雪5 小时前
[学习日记]看书笔记
java·学习
DKPT5 小时前
JVM直接内存和堆内存比例如何设置?
java·jvm·笔记·学习·spring
py有趣6 小时前
LeetCode学习之0矩阵
学习·leetcode·矩阵
暖阳之下6 小时前
学习周报十九
学习·多模态·1024程序员节
小年糕是糕手7 小时前
【数据结构】队列“0”基础知识讲解 + 实战演练
c语言·开发语言·数据结构·c++·学习·算法
报错小能手7 小时前
项目——基于C/S架构的预约系统平台(2)
linux·c语言·笔记·学习·架构
Brookty7 小时前
【算法】前缀和(二)使用
java·学习·算法·前缀和·动态规划·1024程序员节
序属秋秋秋8 小时前
《Linux系统编程之入门基础》【权限管理】
linux·运维·服务器·笔记·学习·ubuntu·xshell