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>