banner轮播

 

<!--

autoplay="true" 设置是否自动播放

previous-margin="40" next-margin="40"间距

-->

<template>

<view class="container">

<view class="swiper-out">

<swiper class="swiper" previous-margin="40" next-margin="40"

autoplay="true"

interval="4000"

circular="true"

duration="1000"

@change="changehandler">

<form v-for="(item, index) in 10" :index="index" :key="index"

report-submit="true"

:data-tid="item.tid"

@submit="formidTap" :data-typeof="1" >

<swiper-item class="swiper-item">

<button formType="submit" class="form-btn">

<view class="banner">

<!-- :class="current===index ?'scale1': 'scale2'" -->

<image mode="scaleToFill" :class="{ scale1:current===index,scale2:current!=index }"

src="https://yanxuan.nosdn.127.net/7e1cc8514d68e88c561d560e9265bd6d.jpg?imageView&quality=75&thumbnail=750x0"

class="slide-image" />

</view>

</button>

</swiper-item>

</form>

</swiper>

</view>

</view>

</template>

 

<script>

 

console.log("index");

 

export default {

data() {

return {

current:0,

};

},

 

computed:{

},

 

components: {

},

onShow(){

},

methods: {

prev(current){

wx.previewImage({

current: current, // 当前显示图片的http链接

urls: [current]// 需要预览的图片http链接列表

})

},

changehandler(e) {

this.current = e.mp.detail.current;

}

},

 

created() {

// 调用应用实例的方法获取全局数据

}

};

 

</script>

 

<style lang="scss" scoped>

 

// banner

.swiper-out {

margin-bottom: 40rpx;

margin: 30rpx auto 0;

}

.scale1{

transform:scale(1);

}

.scale2{

transform:scale(0.9);

}

.swiper {

height: 862rpx;

background: transparent;

padding-top: 20rpx;

}

form{

width: 100%;

height: inherit;

}

swiper-item {

box-sizing: border-box;

display: flex;

justify-content: center;

align-items: flex-start;

// margin-top: 20rpx;

}

.form-btn {

background: transparent;

box-sizing: border-box;

display: flex;

justify-content: center;

flex-direction: column;

width: 600rpx;

border-radius: 20rpx;

padding: 0;

}

.form-btn:after{

content: none;

}

.banner {

width: 600rpx;

height: 852rpx;

overflow: hidden;

border-radius: 20rpx;

position: relative;

display: flex;

align-items: center;

}

.slide-image {

width: 560rpx;

min-height: 852rpx;

margin: 0 auto;

border-radius: 30rpx;

}

</style>