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_915909062 小时前
“绑定 HTTPS” 的工程全流程 从证书配置到真机验证与故障排查
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915918413 小时前
iOS 混淆实战 多工具组合完成 IPA 混淆、加固与工程化落地(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者86 小时前
如何系统化掌握 iOS 26 App 耗电管理,多工具协作
android·macos·ios·小程序·uni-app·cocoa·iphone
BumBle7 小时前
uniapp AI聊天应用技术解析:实现流畅的Streaming聊天体验(基础版本)
前端·uni-app
2501_915921437 小时前
运营日志驱动,在 iOS 26 上掌握 App 日志管理实践
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q196328847513 小时前
python+uniapp基于微信美食点餐系统小程序
spring boot·python·微信·django·flask·uni-app·node.js
阿金要当大魔王~~14 小时前
uniapp 请求携带数据 \\接口传值 \\ map遍历数据
前端·javascript·uni-app
2501_9151063216 小时前
HTTPS 爬虫实战指南 从握手原理到反爬应对与流量抓包分析
爬虫·网络协议·ios·小程序·https·uni-app·iphone
2501_9160074716 小时前
iOS 上架技术支持全流程解析,从签名配置到使用 开心上架 的实战经验分享
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_916007471 天前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone