目录web前端全系列 教程
1839个小节阅读：2243.1k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本，未来主流的版本
人工智能 教程
顺势而为，AI创新未来
大厂算法 教程
算法，程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
滑块视图容器（焦点轮播图）
我们增加一个全新的页面swiper来实现轮播图效果
xxxxxxxxxx<!-- swiper.wxml --><view> <swiper> <swiper-item> <image src="../../images/1.png"></image> </swiper-item> <swiper-item> <image src="../../images/2.jpg"></image> </swiper-item> <swiper-item> <image src="../../images/3.jpg"></image> </swiper-item> </swiper></view>为了更美观，可以让图片宽度充满全屏,并保持图片不变形
xxxxxxxxxx<!-- swiper.wxml --><view> <swiper class="swiper"> <swiper-item> <image mode="widthFix" src="../../images/1.png"></image> </swiper-item> <swiper-item> <image mode="widthFix" src="../../images/2.jpg"></image> </swiper-item> <swiper-item> <image mode="widthFix" src="../../images/3.jpg"></image> </swiper-item> </swiper></view>同时设置图片样式充满全屏，因为图片默认大小：宽度320px、高度240px
xxxxxxxxxx/* swiper.wxss */image{ width: 100%;}| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| 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 | 否 | 滑动方向是否为纵向 |
xxxxxxxxxx<!-- swiper.wxml --><view> <swiper class="swiper" indicator-dots indicator-color="#fff" indicator-active-color="#f00" autoplay interval="5000" duration="1000" circular vertical > <swiper-item> <image mode="widthFix" src="../../images/1.png"></image> </swiper-item> <swiper-item> <image mode="widthFix" src="../../images/2.jpg"></image> </swiper-item> <swiper-item> <image mode="widthFix" src="../../images/3.jpg"></image> </swiper-item> </swiper></view>我们可以在逻辑文件swiper.js中动态配置属性值
xxxxxxxxxx// news.jsPage({ data: { swiperOptions:{ indicatorDots:true, indicatorColor:"#fff", indicatorActiveColor:"#f00", autoplay:true, interval:5000, duration:1000, circular:true, vertical:true } }})xxxxxxxxxx<!-- swiper.wxml --><view> <swiper class="swiper" indicator-dots="{{ swiperOptions.indicatorDots }}" indicator-color="{{ swiperOptions.indicatorColor }}" indicator-active-color="{{ swiperOptions.indicatorActiveColor }}" autoplay="{{ swiperOptions.autoplay }}" interval="{{ swiperOptions.interval }}" duration="{{ swiperOptions.duration }}" circular="{{ swiperOptions.circular }}" vertical="{{ swiperOptions.vertical }}" > <swiper-item> <image mode="widthFix" src="../../images/1.png"></image> </swiper-item> <swiper-item> <image mode="widthFix" src="../../images/2.jpg"></image> </swiper-item> <swiper-item> <image mode="widthFix" src="../../images/3.jpg"></image> </swiper-item> </swiper></view>实时效果反馈
1. 在小程序中，下列那个属性可以设置滑块视图容器自动滚动：
A duration
B circular
C vertical
D autoplay
答案
1=>D