Uniapp:swiper(滑块视图容器)

目录


一、基本概述

一般用于左右滑动或上下滑动,比如banner轮播图

二、属性说明

属性名 类型 默认值 说明 平台差异说明
indicator-dots Boolean false 是否显示面板指示点
indicator-color Color rgba(0, 0, 0, .3) 指示点颜色
indicator-active-color Color #000000 当前选中的指示点颜色
autoplay Boolean false 是否自动切换
interval Number 5000 自动切换时间间隔
duration Number 500 滑动动画时长
circular Boolean false 是否采用衔接滑动,即播放到末尾后重新回到开头
vertical Boolean false 滑动方向是否为纵向

三、基本使用

html 复制代码
<swiper class="swiper" indicator-dots indicator-color="#32cd32" indicator-active-color="#ffaa00" autoplay interval="2000" duration="400" circular vertical>
  <swiper-item>
    <view class="swiper-item uni-bg-red">A</view>
  </swiper-item>
  <swiper-item>
    <view class="swiper-item uni-bg-green">B</view>
  </swiper-item>
  <swiper-item>
    <view class="swiper-item uni-bg-blue">C</view>
  </swiper-item>
</swiper>
css 复制代码
.swiper {
  margin-top: 10px;
  height: 300rpx;
}
.uni-margin-wrap {
  width:690rpx;
  width: 100%;;
}
.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
}
相关推荐
2501_915918411 小时前
Video over HTTPS,视频流(HLSDASH)在 HTTPS 下的调试与抓包实战
网络协议·http·ios·小程序·https·uni-app·iphone
鱼樱前端3 小时前
uni-app快速入门章法(一)
前端·uni-app
Q_Q5110082854 小时前
python+springboot+uniapp基于微信小程序的任务打卡系统
spring boot·python·django·flask·uni-app·node.js·php
李慕婉学姐4 小时前
【开题答辩过程】以《基于SpringBoot+Vue+uni-app的智慧校园服务系统的设计与实现》为例,不会开题答辩的可以进来看看
spring boot·uni-app
withoutfear4 小时前
uni-app 开发H5软键盘会顶起底部内容的解决方案
uni-app·软键盘
影子信息4 小时前
uniapp 日历组件 uni-datetime-picker
前端·uni-app
不知名的前端专家4 小时前
uniapp 安卓FTP上传下载操作原生插件
android·uni-app
2501_9160137411 小时前
iOS 26 系统流畅度检测 从视觉特效到帧率稳定的实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
游戏开发爱好者821 小时前
iOS 26 崩溃日志深度解读,获取方式、系统变动、定位策略
android·macos·ios·小程序·uni-app·cocoa·iphone
郑州光合科技余经理1 天前
微服务架构:基于Spring Cloud ,构建同城生活服务平台
java·spring cloud·微服务·小程序·架构·uni-app