文件路径: E:/homework/uniappv3tswallpaper/pages/index/index.vue
<template>
<view class="homeLayout">
<view class="banner">
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true"
indicator-color="rgba(255,255,255,0.5)">
<swiper-item v-for="item in 3">
<image src="../../common/images/banner1.jpg" mode="scaleToFill"></image>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script setup>
</script>
<style lang="scss">
.homeLayout {
.banner {
width: 750rpx;
padding: 30rpx 0;
swiper {
width: 100%;
height: 340rpx;
&-item {
width: 100%;
height: 100%;
padding: 0 30rpx;
image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
}
}
}
</style>
文件路径: E:/homework/uniappv3tswallpaper/App.vue
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style lang="scss">
/*每个页面公共css */
@import "common/style/common-style.scss"
</style>
文件路径: E:/homework/uniappv3tswallpaper/common/style/common-style.scss
view,swiper,swiper-item{
box-sizing: border-box;
}
注意:
已经在common文件夹中添加过测试时使用的图片资源。