ToB企服应用市场:ToB评测及商务社交产业平台

标题: EP1 banner海报swiper轮播器 [打印本页]

---

作者: 我爱普洱茶    时间: 2024-9-12 08:33
标题: EP1 banner海报swiper轮播器
文件路径： E:/homework/uniappv3tswallpaper/pages/index/index.vue

1. <template>
2.         <view class="homeLayout">
3.                 <view class="banner">
4.                         <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true"
5.                                 indicator-color="rgba(255,255,255,0.5)">
6.                                 <swiper-item v-for="item in 3">
7.                                         <image src="../../common/images/banner1.jpg" mode="scaleToFill"></image>
8.                                 </swiper-item>
9.                         </swiper>
10.                 </view>
11.         </view>
12. </template>
14. <script setup>
16. </script>
18. <style lang="scss">
19.         .homeLayout {
20.                 .banner {
21.                         width: 750rpx;
22.                         padding: 30rpx 0;
24.                         swiper {
25.                                 width: 100%;
26.                                 height: 340rpx;
28.                                 &-item {
29.                                         width: 100%;
30.                                         height: 100%;
31.                                         padding: 0 30rpx;
33.                                         image {
34.                                                 width: 100%;
35.                                                 height: 100%;
36.                                                 border-radius: 10rpx;
37.                                         }
38.                                 }
39.                         }
40.                 }
41.         }
42. </style>

复制代码

文件路径： E:/homework/uniappv3tswallpaper/App.vue

1. <script>
2.         export default {
3.                 onLaunch: function() {
4.                         console.log('App Launch')
5.                 },
6.                 onShow: function() {
7.                         console.log('App Show')
8.                 },
9.                 onHide: function() {
10.                         console.log('App Hide')
11.                 }
12.         }
13. </script>
15. <style lang="scss">
16.         /*每个页面公共css */
17.         @import "common/style/common-style.scss"
18. </style>

复制代码

文件路径： E:/homework/uniappv3tswallpaper/common/style/common-style.scss

1. view,swiper,swiper-item{
2.         box-sizing: border-box;
3. }

复制代码

留意：
已经在common文件夹中添加过测试时使用的图片资源。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4