nui-app大屏广告轮播

轮播子组件 代码详情

文件位置/components/template/swiper/big-ad.vue

<template>
    <view>
        <page-head :title="title"></page-head>

            <view class="page-section">
                    <view class="swiper-item-badge">
                        <view :style="index==idx?'background:#fff':''" @tap="index=idx" v-for="(item,idx) in items" :key="idx" >
                            {{idx}} 
                        </view>
                        
                    </view>

                    <swiper class="swiper" :indicator-dots="indicatorDots" :current="index"  @change="change" :autoplay="autoplay" :interval="interval" :duration="duration">

                        <swiper-item v-for="(item,index) in items" :key="index">

                            <view class="swiper-item ">
                                
                                <view class="swiper-item-title">{{item.title}}</view>
                                <image :src="item.image" mode="aspectFill"></image>
                                
                            </view>
                        </swiper-item>
                    </swiper>

            </view>


    </view>
</template>
<script>
    export default {
        data() {
            return {

                title: 'swiper',
                items:[
                    {
                        title:"明天的生活会更好，大家的努力都值得，明天的生活会更好，大家的努力都值得",
                        image:"https://p.pstatp.com/weili/bl/57421573862329129.jpg",
                    },{
                        title:"明天的生活会更好，大家的努力都值得，明天的生活会更好，大家的努力都值得",
                        image:"https://p.pstatp.com/weili/bl/57421573862329129.jpg",
                    },{
                        title:"明天的生活会更好，大家的努力都值得，明天的生活会更好，大家的努力都值得",
                        image:"https://p.pstatp.com/weili/bl/57421573862329129.jpg",
                    }
                    ],
                index:0,//当前显示索引
                indicatorDots: false,//显示指示点
                autoplay: true,//自动轮播
                interval: 2000,//每次轮播间隔时间
                duration: 1000,//轮播进行速度
            }
        },
        methods: {
            change(e){
                // 监听轮播变化
                // console.log(e)
                this.index=e.detail.current;
            },

            setIndicatorDots(e) {
                // 开启/关闭指示点
                this.indicatorDots = !this.indicatorDots
            },
            setAutoplay(e) {
                // 开启/关闭轮播自动
                this.autoplay = !this.autoplay
            },
            setInterval(num) {
                // 设置轮播间隔时间
                this.interval = num;
            },
            setDuration(num) {
                // 设置轮播进行速度
                this.duration = num
            }
        }
    }
</script>

<style>
    .page-section{
        height: 300upx;
        box-sizing: border-box;
        width: 100%;
    }

    .swiper-item {
        /* position:relative; */
        display: block;
        height: 300upx;
        line-height: 300upx;
        text-align: center;
    }
    .swiper-item-title{
        width: 100%;
        opacity:0.5;
        background: #2F2F2F;
        box-sizing: border-box;
        line-height: 1em;
        padding: 0.5em;
        bottom: 0;
        position:absolute;
        overflow: hidden;/*超出部分隐藏*/
        white-space: nowrap;/*不换行*/
          text-overflow:ellipsis;/*超出部分文字以...显示*/
    }
    .swiper-item-badge{
        top: 0.2em;
        display: flex;
        right: 1em;
        z-index: 1;
        position:absolute;
    }
    .swiper-item-badge view{
        line-height: 1em;
        margin: 0 0.1em;
        /* text-align: center; */
        padding:0.2em;
        opacity:0.5;
        background: #000;
    }
    .swiper-item image{
        min-height: 100%;
        min-width: 100%;
    }
        
</style>

主页面引入子组件|代码详情

路径：/pages/index.vue

<template>
    <view>
        <page-head :title="title"></page-head>
        <view class="page-body">
            <header></header>
            <view class="main-content" >
                <view class="">
                    <big-ad class=""   ref="bigAd" ></big-ad>
                </view>

                <footer>

                </footer>   

        </view>
    </view>
</template>
<script>
//子组件文件引入到当前页面
    import bigAd from '../../components/template/swiper/big-ad.vue';
    export default {
        name: "index",
        data() {
            return {
                searchInput:'',
                index:0,
                items:[
                    {
                        fn:this.tijiao,
                        msg:0,
                        name:'首页',
                        ico:'icon-fangzi',
                        url:'/pages/index/index'
                    },{
                        fn:this.tijiao,
                        msg:0,
                        name:'店铺页',
                        ico:'icon-dianpu',
                        url:'/pages/goods/category'
                    },
                    {
                        fn:this.tijiao,
                        msg:230,
                        name:'购物车',
                        ico:'icon-gouwuche',
                        url:'/pages/goods/cart'
                    },
                    {
                        fn:this.tijiao,
                        msg:0,
                        name:'我的',
                        ico:'icon-wode',
                        url:'/pages/user/index'
                    }
                ],
            }
        },
        methods: {
            tijiao(item){
                console.log(item)
                uni.navigateTo({
                    url: item.url
                });
            }
        },
        mounted: function (){
            
            // el渲染完成触发
            this.$nextTick(function () {
            // this.$refs.bottomNav.index=2; //默认触发的样式的索引
            // 替换底部nav 内容
            this.$refs.bottomNav.items=this.items;
            // console.log(this.items)
            // console.log(this.$refs.bottomNav);//

          })
            
        },components: { 
    //注册子组件
            bottomNav
        },
    }
</script>

<style>
    .page-body{
        flex-direction: column;
        align-content: ;
        height: 100vh;
        display: flex;
    }
header{
}

.main-content{

  text-align: center;
  /* background:#DD524D; */
  flex:1;
  overflow:auto;
  box-sizing:border-box;
}

footer{
    height: 100upx;
    background:red;

    overflow:hidden;
    /* background:#fff; */
    box-shadow:0px 1px 15px #ccc;
}


</style>