15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页

uni-app的原生轮播图组件

李家霖| 发布于 2021-07-07 21:45:57| 467阅读| 1点赞| 0评论
举报

使用uni-app提供的轮播图组件需要注意的地方

uni-app中提供了轮播图的组件 在使用的时候直接复制即可

         <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
                        <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>

使用swiper可以创造一个轮播图的区域  可以控制其大小  swiper中只能使用swiper-item标签 不可以使用其他的标签


swiper中常用的属性

indicator-dots   是否显示 底部的导航点  接收一个布尔值

indicator-color 指示点的颜色  接收一个颜色值 

indicator-active-color  选中指示点的颜色  接收一个颜色值  

autoplay   是否会自动的轮播  接收一个布尔值

interval  切换时的时间间隔   接收一个数值 单位为毫秒

circular   是否是无缝轮播也就是最后一张滑动后显示第一张  接收一个布尔值

1

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

李家霖
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部