轮播子组件 代码详情
文件位置/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>
