uniapp轮播组件之自动轮播

文章目录[隐藏]

• 前言
• 实现代码
• 最终效果(可惜只有静态图)

前言

这两天实践了下 Uniapp 的轮播组件，官方提供了两种轮播组件： 一种是基础轮播组件；另一种是一个复杂的轮播组件。

但是在引用复杂的轮播组件时发现没有自动轮播。看了下评论官方说的可以直接用基础轮播组件的参数。

自己测试了下，果然可以。

实现代码

<template>
    <view class="container">
        <view class="swiper-main">
            <uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
                <swiper class="swiper-box" 
                    @change="change"
                    :autoplay="autoplay"
                    :interval="interval" 
                    :duration="duration"
                >
                    <swiper-item v-for="(item ,index) in info" :key="index">
                        <view class="swiper-item">
                            {{item.content}}
                        </view>
                    </swiper-item>
                </swiper>
            </uni-swiper-dot>
            <view class="uni-padding-wrap">
                <view class="page-section swiper">
                    <view class="page-section-spacing">
                        <swiper class="swiper" 
                            :indicator-dots="indicatorDots" 
                            :autoplay="autoplay" 
                            :interval="interval" 
                            :duration="duration"
                        >
                            <swiper-item v-for="(item, index, key) of lbList" :key="index">
                                <view :class="item.colorClass" class="swiper-item">
                                    <image class="swiper-image" :src="item.vod_pic" mode="aspectFill" />
                                </view>
                            </swiper-item>
                        </swiper>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // background: ['red', 'blue', 'green'],
            indicatorDots: true,
            autoplay: true,
            interval: 2000,
            duration: 500,
            refreshing: false,
            lbList: [],
            info: [{
                content: '内容 A'
            }, {
                content: '内容 B'
            }, {
                content: '内容 C'
            }],
            current: 0,
            mode: 'nav',
        };
    },
    onLoad() {
        this.getAllData();
    },
    onReachBottom() {
        console.log('滑动到页面底部');
        // this.getData();
    },
    onPullDownRefresh() {
        console.log('下拉刷新');
        this.refreshing = true;
        // this.getData();
    },

    methods: {
        getAllData() {
            this.getData('ac=detail&t=1', 'lbList');

            // console.log(newList)

            // 最新 ac=detail
            // 电影： 动作片 ac=detail&t=6
            // 电视剧 大陆 13
            // 综艺： 大陆 25
            // 动漫： 大陆 29
        },
        // 获取数据
        getData(cntType, listData) {
            var that = this;
            var baseUrl = this.$serverUrl + this.$urlPara;
            var url = baseUrl + cntType;

            uni.request({
                url: url,
                success: ret => {
                    if (ret.statusCode !== 200) {
                        console.log('失败!');
                    } else {
                        var data = ret.data;
                        that[listData] = data.list.filter(typeId => that.$filterID.indexOf(typeId.type_id) === -1);
                        if (listData === 'info') {
                            that[listData].splice(0, 6);
                        } else {
                            that[listData].splice(0, 9);
                        }
                    }
                }
            });
        },
        change(e) {
            this.current = e.detail.current;
        },
        changeIndicatorDots(e) {
            this.indicatorDots = !this.indicatorDots;
        },
        changeAutoplay(e) {
            this.autoplay = !this.autoplay;
        },
        intervalChange(e) {
            this.interval = e.target.value;
        },
        durationChange(e) {
            this.duration = e.target.value;
        }
    }
};
</script>

<style>
.container {
    padding: 0px;
    font-size: 14px;
    line-height: 24px;
}
</style>

最终效果(可惜只有静态图)