2023-10-08 21:21:21 +08:00
|
|
|
<script setup>
|
|
|
|
|
// 引入依赖
|
|
|
|
|
import {watch,ref,reactive} from "vue"
|
|
|
|
|
// props
|
|
|
|
|
const props = defineProps(['lbt_list',"height","isRadius","indicatorDots"])
|
|
|
|
|
// 变量
|
|
|
|
|
const interval = ref(2000)
|
|
|
|
|
const autoplay = ref(true)
|
|
|
|
|
// const indicatorDots = ref(false)
|
|
|
|
|
// 监听
|
|
|
|
|
watch(()=> {
|
|
|
|
|
return props.lbt_list
|
|
|
|
|
},(val1,val2) => {
|
|
|
|
|
// console.log(val1)
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
// 方法
|
|
|
|
|
function intervalChange(e) {
|
|
|
|
|
interval.value = e.target.value
|
|
|
|
|
}
|
|
|
|
|
function lbtFunc(item) {
|
|
|
|
|
// 新版数据结构的跳转形式
|
|
|
|
|
uni.navigateTo({
|
2023-11-01 00:33:57 +08:00
|
|
|
url:item.link
|
2023-10-08 21:21:21 +08:00
|
|
|
});
|
|
|
|
|
return
|
|
|
|
|
|
|
|
|
|
// 旧版数据结构的跳转形式
|
|
|
|
|
// if(item.skip_url_type == 2) { // 内链
|
|
|
|
|
// uni.navigateTo({
|
|
|
|
|
// url:item.skip_url
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
// else{ // 外链
|
|
|
|
|
// uni.navigateTo({
|
|
|
|
|
// url:`/pages/webview/webview?links=${item.skip_url}&name=${item.name}`
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<template>
|
|
|
|
|
<view class="swiper-box">
|
|
|
|
|
<view class="uni-margin-wrap">
|
|
|
|
|
<swiper class="swiper" :class="{radiuscss:isRadius}" :style="'height: '+height*2+'rpx;'" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
|
|
|
|
|
:duration="duration">
|
|
|
|
|
<swiper-item @click="lbtFunc(item)" v-for="(item,i) in lbt_list">
|
|
|
|
|
<view class="swiper-item uni-bg-red">
|
|
|
|
|
<!-- <img style="width: 100%;" :src="item.url" alt=""> -->
|
2023-11-01 00:33:57 +08:00
|
|
|
<image :src="item.imgUrl" style="width: 100%;" mode="widthFix"></image>
|
2023-10-08 21:21:21 +08:00
|
|
|
</view>
|
|
|
|
|
</swiper-item>
|
|
|
|
|
</swiper>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
<style>
|
|
|
|
|
.radiuscss{
|
|
|
|
|
border-radius:30rpx;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.swiper-box{
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.swiper-item>img{
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.uni-margin-wrap {
|
|
|
|
|
width: 690rpx;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.swiper {
|
|
|
|
|
height: 300rpx;
|
|
|
|
|
}
|
|
|
|
|
.swiper-item {
|
|
|
|
|
display: block;
|
|
|
|
|
height: 300rpx;
|
|
|
|
|
line-height: 300rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.swiper-list {
|
|
|
|
|
margin-top: 40rpx;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
.uni-common-mt {
|
|
|
|
|
margin-top: 60rpx;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.info {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
.uni-padding-wrap {
|
|
|
|
|
width: 550rpx;
|
|
|
|
|
padding: 0 100rpx;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
