uni-app swiper 无限循环 不停

indicator-dots:是否显示轮播点
indicator-color:轮播点的颜色
indicator-active-color:当前选中轮播点的颜色
autoplay:是否自动切换
current:当前轮播点/滑块的index
**interval:自动切换时间间隔(滑块停留在当前的时长)
duration:滑动动画时长(切换到下一个滑块时所用的时长)**
circular:是否采用衔接滑动,即播放到末尾后重新回到开头

 interval时长>duration时长

<view class="page-section-spacing">
    <swiper class="swiper" 
        indicator-dots="true" 
        autoplay="true" 
        interval="5000" 
        duration="1500"    >
        <swiper-item v-for="(item , index) in homeSlide" :key="index">
            <image :src="item.img" ></image>
        </swiper-item>
    </swiper>
</view>

 

data() {
            return {
                homeSlide:[
                    {img:'/static/1.png'},
                    {img:'/static/2.png'},
                    {img:'/static/3.png'},    
                ],
                iDays:0,
                
            }
        },

.swiper{
        width: 683upx;
        height: 300upx; 
    }
 
    
    .swiper-item image{
        width: 100%;
        height: 100%;
}

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uni-app 中使用 Swiper 进行动态赋值,可以通过以下步骤实现: 1. 在页面中引入 Swiper 组件,并定义数据源: ```html <swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000"> <swiper-item v-for="(item, index) in swiperList" :key="index"> <image :src="item.imageUrl" mode="aspectFill" /> </swiper-item> </swiper> ``` 在上述代码中,我们通过 `v-for` 指令循环遍历数据源 `swiperList`,并使用 `swiper-item` 组件渲染 swiper slides,其中 `item.imageUrl` 表示数据源中每个元素的图片地址。 2. 在 JavaScript 中动态赋值数据源: ```javascript export default { data() { return { swiperList: [], // 数据源 }; }, onLoad() { // 动态获取数据源,假设为数组形式 const newData = [ { imageUrl: 'https://xxx.com/banner1.jpg', }, { imageUrl: 'https://xxx.com/banner2.jpg', }, { imageUrl: 'https://xxx.com/banner3.jpg', }, ]; // 更新数据源 this.swiperList = newData; }, }; ``` 在上述代码中,我们在页面的 `onLoad` 生命周期钩子函数中动态获取数据源,并将其赋值给页面的 `swiperList` 数据属性,这样 Swiper 组件就会自动渲染新的 swiper slides。 需要注意的是,在 uni-app 中使用 Swiper 组件时,需要在 `swiper-item` 中包裹一个具有固定高度的容器,例如: ```html <swiper-item v-for="(item, index) in swiperList" :key="index"> <view style="height: 200rpx;"> <image :src="item.imageUrl" mode="aspectFill" style="height: 100%;" /> </view> </swiper-item> ``` 这是因为 uni-appSwiper 组件的高度是自适应的,需要一个固定高度的容器来撑开 Swiper 组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值